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

Question

提问by Si8

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

我试图将 a<ul>放在 a 中<div>。我尝试了以下

text-align: center;

and

和

left: 50%;

This is not working.

这是行不通的。

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 ulto be centered inside the container.

我希望ul在容器内居中。

Answer 1

回答by kleinfreund

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: "14";
}

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

Notes:

注意事项：

It's not a hack
Browser support: flexbox

这不是黑客
浏览器支持：flexbox

`max-width`& `margin`

You can horizontally center a block-level element by assigning a fixed width and setting margin-rightand margin-leftto auto.

您可以通过分配固定宽度和设置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;
}

Notes:

注意事项：

No container needed
Requires (maximum) width of the centered element to be known

不需要容器
需要知道居中元素的（最大）宽度

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

IE9+：`transform: translatex(-50%)`&`left: 50%`

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 verticalcentering by using topinstead of leftand translateY()instead of translateX(). The two can even be combined.
Browser support: transform2d

居中元素将从文档流中删除。所有元素将完全忽略居中元素。
此技术允许使用代替和代替进行垂直居中。两者甚至可以结合。toplefttranslateY()translateX()
浏览器支持： transform2d

IE8+: `display: table`& `margin`

IE8+：`display: table`&`margin`

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 tableproperty value for display.

就像第一个解决方案一样，您对左右边距使用自动值，但不分配宽度。如果你不需要支持IE7及以下，这是更适合，但感觉那种哈克使用table的属性值display。

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

IE8+: `display: inline-block`& `text-align`

IE8+：`display: inline-block`&`text-align`

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
Aligns flow content to the center (potentially unwanted side 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)

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

Answer 2

回答by Derek Henderson

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

设置 UL auto 的左右边距并为其指定宽度：

#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 提供内联块显示，但您还必须为 LI 提供左浮动或内联显示。

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

Answer 3

回答by user5180178

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

Answer 4

回答by Gaurang P

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/

Answer 5

回答by Michael Benjamin

You can quickly and easily center the ulwith CSS Flexbox.

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

Answer 6

回答by sushmitha shenoy

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

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

提问by Si8

回答by kleinfreund

`display: flex`

`display: flex`

`max-width`& `margin`

`max-width`& `margin`

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

IE9+：`transform: translatex(-50%)`&`left: 50%`

IE8+: `display: table`& `margin`

IE8+：`display: table`&`margin`

IE8+: `display: inline-block`& `text-align`

IE8+：`display: inline-block`&`text-align`

回答by Derek Henderson

回答by user5180178

回答by Gaurang P

回答by Michael Benjamin

回答by sushmitha shenoy

相关推荐

最近更新

标签

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

提问by Si8

回答by kleinfreund

display: flex

display: flex

max-width& margin

max-width& margin

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

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

IE8+: display: table& margin

IE8+：display: table&margin

IE8+: display: inline-block& text-align

IE8+：display: inline-block&text-align

回答by Derek Henderson

回答by user5180178

回答by Gaurang P

回答by Michael Benjamin

回答by sushmitha shenoy

相关推荐

Html 浏览器是发送“\r\n”还是“\n”还是取决于浏览器？

Valign 在 Outlook HTML 电子邮件中不起作用

如何使用 HTML 和 CSS 创建浮雕边框？

Html 非常简单的 javascript 根本不起作用

相关推荐

最近更新

标签

`display: flex`

`display: flex`

`max-width`& `margin`

`max-width`& `margin`

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

IE9+：`transform: translatex(-50%)`&`left: 50%`

IE8+: `display: table`& `margin`

IE8+：`display: table`&`margin`

IE8+: `display: inline-block`& `text-align`

IE8+：`display: inline-block`&`text-align`