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

I am trying to center a <ul> inside a <div>. I tried the following

我正在尝试在

中居中一个

。我尝试以下

text-align: center;

and

和

left: 50%;

This is not working.

这不是工作。

CSS:

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

I want the ul to be centered inside the container.

我希望ul在容器中居中。

5 个解决方案

#1

Following is a list of solutions to centering things in CSS horizontally. The snippet includes all of them.

下面是一个以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>

(The old demo: CSS: Horizontal Centering)

(旧的demo: CSS:水平定心)

---

Solution 1: max-width & margin (IE7+)

You can center a block-level element by assigning a fixed width and margin-right and -left set to auto.

您可以通过为auto分配一个固定的宽度和边距-右和-左设置来将块级元素居中。

.container ul {
  /* for IE below version 7 use `width` instead of `max-width` */
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

Notes:

注:

• No container needed ????
• 不需要容器????
• Requires (maximum) width of the centered element to be known ????
• 需要(maximum)已知????集中元素的宽度

---

Solution 2: display: inline-block & text-align (IE8+)

Centering an element just like you would do with regular text is possible as well. Downside: You need to assign values to both a container and the element itself.

以元素为中心，就像使用常规文本一样，也是可能的。缺点:您需要为容器和元素本身分配值。

.container {
  text-align: center;
}

.container ul {
  display: inline-block;

  /* One most likely needs to realign flow content */
  text-align: initial;
}

Notes:

注:

• Does not require to specify a (maximum) width ????
• 不需要指定一个(maximum)宽度????吗
• Aligns flow content to the center (potentially unwanted side effect) ????
• 对齐流内容中心(potentially多余的边effect)????
• Works kind of well with a dynamic number of menu items (i.e. in cases where you can’t know the width a single item will take up) ????
• 工作的好与一个动态情况下的菜单项(i.e. can’t知道宽度单个项目将up)????

---

Solution 3: display: table & margin (IE8+)

Just like the first solution, you use auto values for right and left margins, but don’t assign a width. If you don’t need to support IE7 and below, this is better suited, although it feels kind of hacky to use the table property value for display.

就像第一个解决方案一样，您对左右边距使用自动值，但不指定宽度。如果您不需要支持IE7和以下版本，那么这是一种更好的选择，尽管使用表属性值进行显示感觉有些陈腐。

.container ul {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

---

Solution 4: transform: translatex(-50%) & left: 50% (IE9+)

This is similar to the quirky centering method which uses absolute positioning and negative margins.

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

.container {
  position: relative;
}

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

Notes:

注:

• The centered element will be removed from document flow. All elements will completely ignore of the centered element. ????????????
• 中心元素将从文档流中删除。所有元素将完全忽略中心元素。????????????
• This technique allows vertical centering by using top instead of left and translateY() instead of translateX(). The two can even be combined. ????
• 这种技术通过使用top而不是left和translateY()而不是translateX()来实现垂直定心。两者甚至可以结合。????
• Browser support: transform2d
• 浏览器支持:transform2d

---

Solution 5: display: flex

.container {
  display: flex;
  justify-content: center;
}

Notes:

注:

• It’s not a hack ????????????
• It’s不是黑客????????????
• Browser support: flexbox
• 浏览器支持:flexbox

#2

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

使您的UL汽车的左右边距，并分配它的宽度:

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

Edit: As kleinfreund has suggested, you can also center align the container and give the ul an inline-block display, but you then also have to give the LIs either a left float or an inline display.

编辑:正如kleinfreund所建议的，您还可以将容器居中对齐，并为ul提供一个内联块显示，但是您还必须为LIs提供一个左浮动或者内联显示。

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

#3

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

#4

You can check this solved your problem...

你可以检查这个解决你的问题…

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

http://jsfiddle.net/thirtydot/VCZgW/

#5

You can quickly and easily center the ul with CSS Flexbox.

你可以用CSS Flexbox快速、轻松地将其居中。

#headermenu {
    display: flex;
    justify-content: center; /* center ul horizontally */
    align-items: center; /* center ul vertically (if necessary) */ 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
}