69

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

4

5 回答 5

235

以下是在 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&margin

您可以通过分配固定宽度和设置来水平居中块级元素margin-right和。margin-leftauto

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

笔记：

  • 不需要指定（最大）宽度
  • 将流内容与中心对齐（可能是不需要的副作用）
  • 适用于动态数量的菜单项（即在您不知道单个项目将占用的宽度的情况下）
于 2013-06-05T17:34:00.057 回答
18

制作 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; */
}
于 2013-06-05T17:33:45.313 回答
4 
ul {
width: 90%; 
    list-style-type:none;
    margin:auto;
    padding:0;
    position:relative;
    left:5%;
}
于 2015-08-01T07:25:34.417 回答
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/

于 2015-07-14T10:11:22.520 回答
0 
ul {
      text-align: center;
      list-style: inside;
    }
于 2020-01-09T11:57:27.803 回答