Zentrieren Sie die horizontale Navigationsleiste CSS

Question

Ich habe versucht, den Anzeigetyp auf Inline-Block zu ändern, den Text an der Mitte ausrichten und die Position relativ ändern, aber nichts, was ich versucht habe, scheint zu funktionieren.

HTML-Code:

<div id="header"> 
    <h1>Politics and Social Media</h1> 
    <div id="navbar"> 
     <ul id="menu"> 
      <li><a href="index.html" class="button selected">Overview</a> 
      </li> 
      <li><a href="media.html" class="button">Media</a></li> 
      <li><a href="author.html" class="button">Author</a></li> 
     </ul> 
    </div> 
    <img src="images/barack.jpg" width="100%" height="75%" margin="0" 
    padding="0" alt="Barack Obama and Joe Biden looking at phone" > 
</div><!--end of header--> 

CSS-Code:

#navbar { 
    width: 100%; 
    height: 45px; 
    overflow: hidden; 
    margin: 0; 
} 

ul#menu { 
    list-style: none; 
    margin-left: 0; 
} 
ul#menu li { 
    float: left; 
    margin-left: -40px; 
} 

Answer 1

Ist das, was Sie erreichen wollen?

CSS:

#header { 
    text-align: center; 
} 
#navbar { 
    width: 100%; 
    height: 45px; 
    overflow: hidden; 
    margin: 0; 
} 

ul#menu { 
    list-style: none; 
    padding-left: 0px; 
} 
    ul#menu li { 
    display: inline-block; 
} 

HTML:

<div id="header"> 
<h1>Politics and Social Media</h1> 
<div id="navbar"> 
    <ul id="menu"> 
     <li><a href="index.html" class="button selected">Overview</a> 
     </li> 
     <li><a href="media.html" class="button">Media</a></li> 
     <li><a href="author.html" class="button">Author</a></li> 
    </ul> 
</div> 
<img src="images/barack.jpg" width="100" height="75" margin="0" 
padding="0" alt="Barack Obama and Joe Biden looking at phone" > 
</div><!--end of header--> 

Answer 2

Try this:

ul#menu { 
    list-style: none; 
    margin: 0 auto; 
} 

Answer 3

Änderung Ihrer css so haben Sie Eltern> text-align: center und Kind> display: inline-block;

ul#menu { 
    list-style: none; 
    margin-left: 0; 
    text-align:center; 
    padding:0px; 
} 
ul#menu li { 
    display:inline-block; 
} 

hier ist ein JSFiddle