How to center navigation bar with logo?

Question

i want to center the content of "header", i can't figure out why it's left and not centered. Should i make the image part of the ? i tried text-align: center; but it doesn't work. ........................................................................................................................................................

header{
    display: flex;
    align-items: center;
}
.logo{
    width: 300px;
    height: 170px;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li a{
    text-decoration: none;
    color: black;
}
li{
    display: inline;
    margin: 20px;
    padding-top: 40px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="home.css" rel="stylesheet" type="text/css">
        <title>I.S.R.F.</title>
    </head>
    <body>
        <header>
            <ul class="left">
                <li><a href="">HOME</a></li>
                <li><a href="">ALBO</a></li>
            </ul>
            <img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
            <ul>
                <li><a href="">L'ISTITUTO</a></li>
                <li><a href="">CONTATTI</a></li>
            </ul>
        </header>
    </body>
</html>

score 0 · Answer 1 · answered Feb 21 '19 at 17:31

Add justify-content: center to your .header and that should centered. Read more about the box model and flexbox

header{
 display: flex;
 align-items: center;
  justify-content: center;
 
}
.logo{
 width: 300px;
 height: 170px;

}
ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
}
li a{
 text-decoration: none;
 color: black;
}
li{
 display: inline;
 margin: 20px;
 padding-top: 40px;
 
}

 <header>
   <ul class="left">
    <li><a href="">HOME</a></li>
    <li><a href="">ALBO</a></li>
   </ul>
      <img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
   <ul>
    <li><a href="">L'ISTITUTO</a></li>
    <li><a href="">CONTATTI</a></li>
   </ul>
   </header>

score 0 · Answer 2 · answered Feb 21 '19 at 17:32

Add in header : justify-content: center

header{
 display: flex;
 align-items: center;
 justify-content: center
}
.logo{
 width: 300px;
 height: 170px;

}
ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
}
li a{
 text-decoration: none;
 color: black;
}
li{
 display: inline;
 margin: 20px;
 padding-top: 40px;
 
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="home.css" rel="stylesheet" type="text/css">
  <title>I.S.R.F.</title>
 </head>
 <body>
  <header>
   <ul class="left">
    <li><a href="">HOME</a></li>
    <li><a href="">ALBO</a></li>
   </ul>
      <img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
   <ul>
    <li><a href="">L'ISTITUTO</a></li>
    <li><a href="">CONTATTI</a></li>
   </ul>
   </header>
   
  
  
 </body>
</html>

How to center navigation bar with logo?

2 Answers2