如何将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%);
}

备注:

• 中心元素将从文档流中删除.所有元素都将完全忽略居中元素.
• 该技术允许使用代替而不是代替而使用垂直居中.这两者甚至可以结合起来.toplefttranslateY()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; */
}