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

时间：2013-06-05 17:31:44

标签： html css centering

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

6 个答案:

答案 0 :(得分：184)

以下列表是水平居中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;
}

备注：

max-width＆amp; 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%)＆amp; left: 50%

这类似于使用绝对定位和负边距的古怪定心方法。

.container {
  position: relative;
}

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

备注：

  • 中心元素将从文档流程中删除。所有元素都将完全忽略居中元素。
  • 此技术允许使用top而不是left和translateY()代替translateX()来实现垂直居中。这两者甚至可以结合起来。
  • Browser support: transform2d

IE8 +：display: table＆amp; margin

就像第一个解决方案一样，您可以为左右边距使用自动值，但不指定宽度。如果您不需要支持IE7及更低版本，那么这更适合，尽管使用table的{​​{1}}属性值会感觉很麻烦。

display

IE8 +：.container ul { display: table; margin-right: auto; margin-left: auto; } ＆amp; display: inline-block

也可以像对待常规文本一样对元素进行居中。缺点：您需要为容器和元素本身分配值。

text-align

备注：

  • 不需要指定（最大）宽度
  • 将流量内容与中心对齐（可能不需要的副作用）
  • 使用动态数量的菜单项（即在您无法知道单个项目将占用的宽度的情况下）工作得很好。

答案 1 :(得分：16)

制作UL自动左边距和右边距，并为其指定宽度：

#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; */
}

答案 2 :(得分：3)

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

答案 3 :(得分：1)

您可以查看这解决了您的问题...... 

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

答案 4 :(得分：0)

您可以使用 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;
}

答案 5 :(得分：0)

ul {
      text-align: center;
      list-style: inside;
    }
相关问题
最新问题