センターアライメントの水平ナビゲーションバーCSS

Question

ディスプレイのタイプをインラインブロックに変更し、テキストを中心に変更し、相対位置に変更しようとしましたが、何も試したことがないようです。

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

CSSコード：

#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

は、これはあなたが達成したいですか？

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

はこれを試してみてください：

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

Answer 3

変更あなたのCSSあなたは親>テキスト整列持っているので：センターと子供を>表示：インラインブロック;

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

ここJSFiddle

です