How do I horizontally center text and an image?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • CoderNatalia
    New Member
    • Dec 2019
    • 1
    #1

    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:

    Code:
    <!DOCTYPE html>

<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>



CSS:

* {
margin: 5px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 90%;
height: 20vh;
margin: 0;
align-items: center;
}

.logo-container,nav-links{
display: flex;
text-align: center;
}
.logo-container {
flex: 1;
text-align: center;
}
.logo{
font-size: 150%;
font-weight: 600;
margin: auto;

}
li{
display: inline;
padding: 0px 30px 0px 30px;
position: relative;
top: 55px;
font-weight: 500;
}
nav {
flex: 2;
}
.nav-links{
justify-content: space-around;
list-style: none;
}
.nav-link{
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
img {
width: 125px;
height: auto;
align-self: center;
}
    Last edited by gits; Dec 14 '19, 09:54 AM. Reason: added code tags
    Tags: None
    • SioSio
      Contributor
      • Dec 2019
      • 272
      #2
      To display in the center, use the <center> tag
      Code:
      <center>
<img src="img/logo.png" alt="logo"> 
<h4 class="logo">The Crazy Cat Lady</h4> 
</center>

        Comment

        • gits
          Recognized Expert Moderator Expert
          • May 2007
          • 5390
          #3
          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:

          Code:
          <html>

  <style type="text/css">
  
    #centered-img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

  </style>

<body>
  <img id="centered-img" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png"/>
</body>
</html>
          PS: since the OP was asking for img and text the following example extends the upper one for such a requirement:

          Code:
          <html>

  <style type="text/css">
  
  #centered-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  #center-container {
    width: 100%;
    text-align: center;
  }

  </style>

<body>
  <div id="center-container">
    <img id="centered-img" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png"/>
    The Crazy Cat Lady
  </div>
</body>
</html>
          Last edited by gits; Jan 8 '20, 03:14 PM.

            Comment

            • SioSio
              Contributor
              • Dec 2019
              • 272
              #4
              Hi gits
              Thank you for the information

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5390
                  #5
                  you are welcome - a pretty good and short overview about how to use what for which purpose in creating websites can be found here:

                  Page Not Found - Coding Dojo
                  https://www.codingdojo.com/blog/html-vs-css-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).
                  Last edited by gits; Jan 10 '20, 01:01 PM.

                    Comment

                    Previous template Next
                    Working...