By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,730 Members | 1,659 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,730 IT Pros & Developers. It's quick & easy.

How do I horizontally center text and an image?

P: 1
I have been trying to move an image (logo.png) and text ("The Crazy Cat Lady") to the center of a page. I have already put the image and text inside a div container and typed text-align="center"; in style.css. Can somone please help me with this issue? My code is below.

HTML:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/CSS/style.css"/> <title>The Crazy Cat Lady</title> </head> <body> <header> <div class="logo-container"> <img src="img/logo.png" alt="logo"> <h4 class="logo">The Crazy Cat Lady</h4> </div> <nav> <ul class="nav-links"> <li><a class="nav-link" href="#">Pablo Picatso</a></li> <li><a class="nav-link" href="#">Tailay</a></li> <li><a class="nav-link" href="#">Lucky</a></li> </ul> </nav> </header> </body> </html>
  4.  
  5.  
  6.  
  7. CSS:
  8.  
  9. * {
  10. margin: 5px;
  11. padding: 0px;
  12. box-sizing: border-box;
  13. }
  14. body {
  15. font-family: 'Poppins', sans-serif;
  16. }
  17. header {
  18. display: flex;
  19. width: 90%;
  20. height: 20vh;
  21. margin: 0;
  22. align-items: center;
  23. }
  24.  
  25. .logo-container,nav-links{
  26. display: flex;
  27. text-align: center;
  28. }
  29. .logo-container {
  30. flex: 1;
  31. text-align: center;
  32. }
  33. .logo{
  34. font-size: 150%;
  35. font-weight: 600;
  36. margin: auto;
  37.  
  38. }
  39. li{
  40. display: inline;
  41. padding: 0px 30px 0px 30px;
  42. position: relative;
  43. top: 55px;
  44. font-weight: 500;
  45. }
  46. nav {
  47. flex: 2;
  48. }
  49. .nav-links{
  50. justify-content: space-around;
  51. list-style: none;
  52. }
  53. .nav-link{
  54. color: #5f5f79;
  55. font-size: 18px;
  56. text-decoration: none;
  57. }
  58. img {
  59. width: 125px;
  60. height: auto;
  61. align-self: center;
  62. }
Dec 14 '19 #1
Share this Question
Share on Google+
4 Replies


P: 51
To display in the center, use the <center> tag
Expand|Select|Wrap|Line Numbers
  1. <center>
  2. <img src="img/logo.png" alt="logo"> 
  3. <h4 class="logo">The Crazy Cat Lady</h4> 
  4. </center>
  5.  
1 Week Ago #2

gits
Expert Mod 5K+
P: 5,369
while this solution might work - its not the preferable one. for layout always use css while for structuring the content use html. that means - a part of the content is a heading or an image (html tags because this is what html is meant for) but how that is presented in the browser is a different task. Browsers can show it even differently. So for that layout tasks we have css - thus the center tag shouldn't even exist and was already deprecated in HTML4 (https://developer.mozilla.org/en-US/...Element/center).

the same can be achieved with css like for example:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3.   <style type="text/css">
  4.  
  5.     #centered-img {
  6.       display: block;
  7.       margin-left: auto;
  8.       margin-right: auto;
  9.     }
  10.  
  11.   </style>
  12.  
  13. <body>
  14.   <img id="centered-img" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png"/>
  15. </body>
  16. </html>
PS: since the OP was asking for img and text the following example extends the upper one for such a requirement:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3.   <style type="text/css">
  4.  
  5.   #centered-img {
  6.     display: block;
  7.     margin-left: auto;
  8.     margin-right: auto;
  9.   }
  10.  
  11.   #center-container {
  12.     width: 100%;
  13.     text-align: center;
  14.   }
  15.  
  16.   </style>
  17.  
  18. <body>
  19.   <div id="center-container">
  20.     <img id="centered-img" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png"/>
  21.     The Crazy Cat Lady
  22.   </div>
  23. </body>
  24. </html>
1 Week Ago #3

P: 51
Hi gits
Thank you for the information
1 Week Ago #4

gits
Expert Mod 5K+
P: 5,369
you are welcome - a pretty good and short overview about how to use what for which purpose in creating websites can be found here:

https://www.codingdojo.com/blog/html...s-inforgraphic

this is just a simple overview though since today's webpages usually are not built in such a static way anymore. Modern single page applications mostly create their user interfaces with javascript and here some of the typical programming principles apply as well. But like there and here we can break it down to something like 'separation of concerns' at least - which is a good principle to apply whenever possible - since it structures the 'program' usually at least in a more easy understandable and maintainable way (even though HTML/CSS cant be seen as programming in a strict way).
1 Week Ago #5

Post your reply

Sign in to post your reply or Sign up for a free account.