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

注意事项 ：

• 这不是a
• 浏览器支持：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%);
}

注意事项 ：

• 居中的元素将从 文档流中 删除。所有元素将完全忽略居中元素。
• 此技术通过使用代替和来允许 垂直 居中。两者甚至可以合并。top``left``translateY()``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;
}

笔记：

• 不需要指定（最大）宽度
• 使流内容与中心对齐（潜在的有害副作用）
• a动态数量的菜单项效果很好（例如，在您不知道单个项目占用的宽度的情况下）