如何将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 居中于容器中。

- Si8

---

我觉得我可以补充一下这个问题，现在可以用“Flex”更轻松地完成上述操作。 - Si8

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

与第一种解决方案类似，您可以为右和左边距设置auto值，但不指定宽度。如果您不需要支持IE7及以下版本，则此方法更适用，尽管使用table属性值来代替display感觉有点hacky。

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

注意：

• 不需要指定（最大）宽度
• 将流内容居中对齐（可能会产生不必要的副作用）
• 在动态菜单项数量的情况下效果还算不错（即在无法知道单个项目占用的宽度的情况下）

- kleinfreund

---

谢谢您，显示CSS样式已经修复了。 - Si8

谢谢@kleinfreund，使用“解决方案3”在Firefox 29.0.1和IE10上对我有用。 - hatsrumandcode

@kleinfreund！我正在使用Chrome 39.0.2171.95，当我在主div上使用text-align:center时，ul居然也居中了！！那么这些hack是否真的需要用于现代浏览器呢？链接：http://jsfiddle.net/8jsat2h9/。 - Tenali_raman

@kleinfreund 我有一种感觉，你只是为了好看而包含了第四个解决方案 :) 因为你提到它需要前缀。我在我的初始评论中附上了一个小样例，但你不必回答它，我自己已经想通了 :D 。非常好的答案！谢谢。 - Tenali_raman

我使用Bootstrap，即使没有max-width，第一种方法也可以正常工作，这很不错。 - Joe Half Face

Answer 2

Make the left and right margins of your UL auto and assign it a width:

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

编辑： 正如kleinfreund建议的那样，您也可以将容器居中对齐，并为ul设置inline-block显示，但您还必须使LIs左浮动或内联显示。

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

- Derek Henderson

---

链接作者提供的#headermenu中的菜单项（锚点）已分配了float: left;。 - kleinfreund

@kleinfreund，是的，在他的页面上有，但在他贴在问题中的代码片段中没有。明确说明这一点并不会有什么坏处。 - Derek Henderson

也许你应该使用float作为示例，因为菜单项在他的页面上也不是内联的。 - kleinfreund

@kleinfreund，好的。我之前把浮点数放在注释里了，但现在已经改过来了。 - Derek Henderson

Answer 3

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

- user5180178

---

我会尽力进行翻译，以使内容更加清晰易懂，但不改变原意。请解释您在这里所做的事情。 - Suresh Karia

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/

- GIPSSTAR

Answer 5

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

- sushmitha shenoy