如何將ul元素水平對齊到中心

Question

我無法將ul包含的菜單與其容器的水平中心對齊。 怎么做？

在jsFiddle上查看菜單的現場演示 。

<li><a href="aboutus.php">AboutUs</a>
    <ul class="sub">
        <li><a href="aboutsquare.php">About Square Innovations</a></li>
        <li><a href="ourvision.php">Our Vision</a></li>
        <li><a href="ourmission.php">Our Mission</a></li>
        <li><a href="trainerprofiles.php">Trainer Profiles</a></li>
        <li><a href="funclass.php">Fun In Our ClassRooms</a></li>
    </ul>
</li>

Answer 1

您可以在頁面流中將ul元素作為行內元素處理，同時保留其塊級特征（使用inline-block顯示值）-應用此元素后，可以像在任何inline-block中一樣將其在容器中簡單地對齊級別元素，使用text-align 。

要實現此目的，請添加以下規則：

#container {
    text-align: center;
}
ul {
    display: inline-block;
}

這是更新的演示 。

參考

• 在Mozilla開發人員網絡上display

---

免責聲明：對inline-block支持受到一定限制，請參見caniuse.com上的兼容性表 。

Answer 2

只要菜單停留在一行上，就有一個非常巧妙，完全跨瀏覽器的動態“技巧”來實現。 在這里對此進行了很好的解釋： http : //matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

根據我的經驗，在舊版瀏覽器中對此問題經常建議的內聯塊不是很好支持。 老實說，我從不使用它。 我總是追求馬修·詹姆斯·泰勒（Matthew James Taylor）描述的聰明方法。

編輯：根據要求，我將簡要描述該技術。 您的html看起來應該像是普通的鏈接列表，並帶有一個環繞的div。 像這樣：

<div class="menu-wrapper">
  <ul>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
  </ul>
</div>

現在剩下的工作就是CSS工作。 步驟如下：

• 將包裝器向左浮動，使其寬度為100％，以使其占據整個視口寬度
• 將ul和li都向左浮動，不要給它們任何寬度以使其適應其內容。
• 給ul一個position: relative left: 50% position: relative left: 50% 。 這將使它的左邊緣移動到其父對象的中心，這意味着視口的中心。
• 最后，您應該給li一個position: relative left: -50% position: relative left: -50% 。 這將使它們移過父ul的左邊緣，並使li列表的中心與父ul的左邊緣ul 。 由於在上一步中將邊緣定為視口的中心，因此菜單現已有效居中。

就像我之前說過的， 所有功勞都歸功於馬修·詹姆斯·泰勒 （ Matthew James Taylor） ，並明確檢查了他的詳盡解釋 。 他制作的圖紙使理解變得更加容易。

編輯
根據要求，我設置了一些小提琴來演示該技術： http : //jsfiddle.net/fDmCQ/

Answer 3

將<ul>上的邊距0 auto更改為0 auto並為其設置寬度（〜575px或更大）。

jsFiddle示例

 ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0 auto;
     padding: 0;
     width:600px;
     list-style: none;
     text-align: center;
 }