如何将ul水平对齐到div的中心？

Posted 2023-03-05

【中文标题】如何将ul水平对齐到div的中心？

【英文标题】：How to horizontally align ul to center of div?

【发布时间】：2013-06-01 12:40:56

【问题描述】：

我试图将<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 在容器内居中。

【参考方案1】：

以下是在 CSS 中水平居中的解决方案列表。 sn-p 包括所有这些。

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;

注意事项：

这不是 hack ??? Browser support: 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() 来垂直 居中。两者甚至可以结合起来。 ? Browser support: transform2d

---

IE8+: display: table & margin

就像第一个解决方案一样，您对左右边距使用自动值，但不指定宽度。如果您不需要支持 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;

注意事项：

不需要指定（最大）宽度 ? 将流内容与中心对齐（可能是不需要的副作用）? 可以很好地处理动态数量的菜单项（即在您不知道单个项目将占用的宽度的情况下）?

【讨论】：

谢谢... display css 样式修复了它。

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

@kleinfreund ！我正在使用 chrome 39.0.2171.95，当我在主 div 上执行 text-align:center 时，ul 居中！ ，那么现代浏览器真的需要这些技巧吗？链接：jsfiddle.net/8jsat2h9.

我不会把这些称为黑客。也许最后一个很奇怪，但在某些情况下你可能需要它。你有什么问题？

@kleinfreund 我感觉你包含了第 4 个解决方案，只是为了吸引眼球:) 正如你提到的那样，它需要预先修复。我的问题是在我最初的评论中附有小提琴。但是您实际上不必回答，我自己想通了：D。很好的答案！谢谢。

【参考方案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; */

【讨论】：

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

@kleinfreund，是的，在他的页面上他们这样做了，但不是在他粘贴在问题中的代码 sn-p 中。明确说明这一点并没有什么坏处。

也许你应该使用浮动作为你的例子，因为菜单项也不是内联在他的页面上。

@kleinfreund，很好。我在评论中有浮动，但我现在已经改变了它。

【参考方案3】：

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

【讨论】：

解释一下你在这里做了什么！

【参考方案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/

【参考方案5】：

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