468,283 Members | 2,017 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,283 developers. It's quick & easy.

How do I horizontally center text and an image?

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
4 3550
SioSio
240 128KB
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.  
Jan 8 '20 #2
gits
5,390 Expert Mod 4TB
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>
Jan 8 '20 #3
SioSio
240 128KB
Hi gits
Thank you for the information
Jan 9 '20 #4
gits
5,390 Expert Mod 4TB
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).
Jan 9 '20 #5

Post your reply

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

Similar topics

2 posts views Thread by Gustav Medler | last post: by
1 post views Thread by Richard Cleaveland | last post: by
7 posts views Thread by Sean | last post: by
2 posts views Thread by Win, Pats | last post: by
1 post views Thread by Krustov | last post: by
reply views Thread by NPC403 | last post: by
2 posts views Thread by MrBee | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.