如何將ul水平對齊到div的中心？

Question

我試圖將<ul>放在<div> 。 我嘗試了以下

text-align: center;

和

left: 50%;

這是行不通的。

CSS :

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding: 0 0 0 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

我希望ul在容器內居中。

Answer 1

以下是在 CSS 中水平居中的解決方案列表。 該代碼段包括所有這些。

 html { font: 1.25em/1.5 Georgia, Times, serif; } pre { color: #fff; background-color: #333; padding: 10px; } blockquote { max-width: 400px; background-color: #e0f0d1; } blockquote > p { font-style: italic; } blockquote > p:first-of-type::before { content: open-quote; } blockquote > p:last-of-type::after { content: close-quote; } blockquote > footer::before { content: "\\2014"; } .container, blockquote { position: relative; padding: 20px; } .container { background-color: tomato; } .container::after, blockquote::after { position: absolute; right: 0; bottom: 0; padding: 2px 10px; border: 1px dotted #000; background-color: #fff; } .container::after { content: ".container-" attr(data-num); z-index: 1; } blockquote::after { content: ".quote-" attr(data-num); z-index: 2; } .container-4 { margin-bottom: 200px; } /** * Solution 1 */ .quote-1 { max-width: 400px; margin-right: auto; margin-left: auto; } /** * Solution 2 */ .container-2 { text-align: center; } .quote-2 { display: inline-block; text-align: left; } /** * Solution 3 */ .quote-3 { display: table; margin-right: auto; margin-left: auto; } /** * Solution 4 */ .container-4 { position: relative; } .quote-4 { position: absolute; left: 50%; transform: translateX(-50%); } /** * Solution 5 */ .container-5 { display: flex; justify-content: center; }

 <main> <h1>CSS: Horizontal Centering</h1> <h2>Uncentered Example</h2> <p>This is the scenario: We have a container with an element inside of it that we want to center. I just added a little padding and background colors so both elements are distinquishable.</p> <div class="container container-0" data-num="0"> <blockquote class="quote-0" data-num="0"> <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p> <footer>Tasha Yar about Data</footer> </blockquote> </div> <h2>Solution 1: Using <code>max-width</code> & <code>margin</code> (IE7)</h2> <p>This method is widely used. The upside here is that only the element which one wants to center needs rules.</p> <pre><code>.quote-1 { max-width: 400px; margin-right: auto; margin-left: auto; }</code></pre> <div class="container container-1" data-num="1"> <blockquote class="quote quote-1" data-num="1"> <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p> <footer>Tasha Yar about Data</footer> </blockquote> </div> <h2>Solution 2: Using <code>display: inline-block</code> and <code>text-align</code> (IE8)</h2> <p>This method utilizes that <code>inline-block</code> elements are treated as text and as such they are affected by the <code>text-align</code> property. This does not rely on a fixed width which is an upside. This is helpful for when you don't know the number of elements in a container for example.</p> <pre><code>.container-2 { text-align: center; } .quote-2 { display: inline-block; text-align: left; }</code></pre> <div class="container container-2" data-num="2"> <blockquote class="quote quote-2" data-num="2"> <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p> <footer>Tasha Yar about Data</footer> </blockquote> </div> <h2>Solution 3: Using <code>display: table</code> and <code>margin</code> (IE8)</h2> <p>Very similar to the second solution but only requires to apply rules on the element that is to be centered.</p> <pre><code>.quote-3 { display: table; margin-right: auto; margin-left: auto; }</code></pre> <div class="container container-3" data-num="3"> <blockquote class="quote quote-3" data-num="3"> <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p> <footer>Tasha Yar about Data</footer> </blockquote> </div> <h2>Solution 4: Using <code>translate()</code> and <code>position</code> (IE9)</h2> <p>Don't use as a general approach for horizontal centering elements. The downside here is that the centered element will be removed from the document flow. Notice the container shrinking to zero height with only the padding keeping it visible. This is what <i>removing an element from the document flow</i> means.</p> <p>There are however applications for this technique. For example, it works for <b>vertically</b> centering by using <code>top</code> or <code>bottom</code> together with <code>translateY()</code>.</p> <pre><code>.container-4 { position: relative; } .quote-4 { position: absolute; left: 50%; transform: translateX(-50%); }</code></pre> <div class="container container-4" data-num="4"> <blockquote class="quote quote-4" data-num="4"> <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p> <footer>Tasha Yar about Data</footer> </blockquote> </div> <h2>Solution 5: Using Flexible Box Layout Module (IE10+ with vendor prefix)</h2> <p></p> <pre><code>.container-5 { display: flex; justify-content: center; }</code></pre> <div class="container container-5" data-num="5"> <blockquote class="quote quote-5" data-num="5"> <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p> <footer>Tasha Yar about Data</footer> </blockquote> </div> </main>

---

display: flex

.container {
  display: flex;
  justify-content: center;
}

注意事項：

• 這不是黑客👍👍👍
• 瀏覽器支持：flexbox

---

max-width和margin

您可以通過分配固定寬度並將margin-right和margin-left為auto來水平居中塊級元素。

.container ul {
  /* for IE below version 7 use `width` instead of `max-width` */
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

注意事項：

• 無需容器👍
• 需要知道居中元素的（最大）寬度 👎

---

IE9+： transform: translatex(-50%) & left: 50%

這類似於使用絕對定位和負邊距的古怪居中方法。

.container {
  position: relative;
}

.container ul {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}

注意事項：

• 居中元素將從文檔流中刪除。 所有元素將完全忽略居中的元素。 👎👎👎
• 這種技術允許垂直居中通過使用top ，而不是left和translateY()而不是translateX() 兩者甚至可以結合。 👍
• 瀏覽器支持： transform2d

---

IE8+： display: table和margin

就像第一個解決方案一樣，您對左右邊距使用自動值，但不分配寬度。 如果您不需要支持 IE7 及以下版本，這更適合，盡管將table屬性值用於display感覺有點麻煩。

.container ul {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

---

IE8+： display: inline-block和text-align

也可以像處理常規文本一樣將元素居中。 缺點：您需要為容器和元素本身分配值。

.container {
  text-align: center;
}

.container ul {
  display: inline-block;

  /* One most likely needs to realign flow content */
  text-align: initial;
}

筆記：

• 不需要指定（最大）寬度👍
• 將流內容對齊到中心（可能不需要的副作用）👎
• 適用於動態數量的菜單項（即在您不知道單個項目將占用的寬度的情況下）👍

Answer 2

設置 UL auto 的左右邊距並為其指定寬度：

#headermenu ul {
    margin: 0 auto;
    width: 620px;
}

編輯：正如 kleinfreund 所建議的，您還可以將容器居中對齊並為 ul 提供內聯塊顯示，但您還必須為 LI 提供左浮動或內聯顯示。

#headermenu { 
    text-align: center;
}
#headermenu ul { 
    display: inline-block;
}
#headermenu ul li {
    float: left; /* or display: inline; */
}

Answer 3

ul {
width: 90%; 
    list-style-type:none;
    margin:auto;
    padding:0;
    position:relative;
    left:5%;
}

Answer 4

您可以檢查這是否解決了您的問題...

    #headermenu ul{ 
        text-align: center;
    }
    #headermenu li { 
list-style-type: none;
        display: inline-block;
    }
    #headermenu ul li a{
        float: left;
    }

http://jsfiddle.net/thirtydot/VCZgW/

Answer 5

您可以使用CSS Flexbox快速輕松地將ul 置於中心位置 。

#headermenu {
    display: flex;
    justify-content: center; /* center ul horizontally */
    align-items: center; /* center ul vertically (if necessary) */ 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
}

Answer 6

ul {
      text-align: center;
      list-style: inside;
    }