居中對齊水平導航欄CSS

我試着將顯示類型更改爲內嵌塊，將文本更改爲居中對齊，並將位置更改爲相對位置，但沒有任何我嘗試過的似乎可行。居中對齊水平導航欄CSS

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

來源

2017-10-19 JGraves

這是你想要達到什麼樣的？

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

來源

2017-10-19 01:47:11 Cons7an7ine

試試這個：

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

來源

2017-10-19 01:47:09

改變你的CSS讓你有家長>的text-align：中心和兒童>顯示：inline-block的;

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

這裏有一個JSFiddle

來源

2017-10-19 01:53:28

居中對齊水平導航欄CSS

回答

相關問題