【问题标题】：Can I center a <ul> with left-aligned <li>s?我可以将 <ul> 与左对齐的 <li> 居中吗？
【发布时间】：2010-07-29 03:58:35
【问题描述】：

我想将左对齐项目列表居中。

这是我目前拥有的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Shrinkwrapped List</title>
    <style type="text/css">
      #wrapper {
        margin: auto;
        width: 500px;
        border: solid 1px #CCCCCC;
      }
      #header {
        text-align: center;
       font-size: 200%;
      }
      #content {
        text-align: center;
      }
      #content ul {
        text-align: left;
        font-size: 150%;
        list-style-type: none;
        margin: 20px auto;
        padding: 0px;
        border: solid 1px #666666;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        Shrinkwrapped List
      </div>
      <div id="content">
        <ul>
          <li>Lorem ipsum</li>
          <li>Dolor sit amet</li>
          <li>Consectetur</li>
          <li>Adipiscing elit</li>
          <li>Morbi odio</li>
          <li>Mi blandit vehicula</li>
        </ul>
      </div>
    </div>
  </body>
</html>

生成的页面如下所示：

我真正想要的是这样的：

我可以通过将width: 200px; 添加到#content ul 来完成此操作，但问题是我有很多这样的列表，而且它们都有不同的宽度。

我希望 <ul> 缩小到内容，以便正确居中。还是我走错了路？

感谢您提供的任何帮助。

解决方案

感谢KennyTM 和Magnar，这是解决方案：

将这四行添加到#content ul的CSS规则中：

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

我已经在 IE6、IE7、IE8 和 Firefox 3.6 中对此进行了测试。结果看起来像上面的第二张图片，并且列表总是适合项目的内容。

【问题讨论】：

我知道这是一个不受欢迎的想法，但是用一张桌子不是更容易吗？
单独给它们宽度也会更容易。您可以为元素样式的 99% 做一个类，然后为单个宽度做另一个类。 search-this.com/2007/04/25/…
在此处查看最佳答案中的链接。这是让 inline-block 在旧浏览器中工作的方法，但它确实看起来很痛苦。 blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block 链接取自这里的最佳答案：stackoverflow.com/questions/2316535/…

标签： html css

【解决方案1】：

将<ul> 设置为使用display: inline-block;。见http://jsbin.com/atizi4。

请注意，IE ≤7 不支持（完全）inline-block。

【讨论】：

display: inline-block 在这里工作完美。不幸的是，我的大多数用户都使用 IE6 或 7。否则，很好的答案。
那么你会很高兴知道IE支持inline-block 如果你给一个元素添加hasLayout，然后设置为display: inline after。这是黑客：foohack.com/2007/11/…
感谢 KennyTM 和 Magnar。结合您的答案和评论中的信息，我能够解决我的问题。修复非常简单。我更新了答案以包含解决方案。

【解决方案2】：

您可能可以采用my previous answer。 IE 的内联块，现代浏览器的 display:table。可能需要明确指定列表样式类型。

编辑：由于这是一个列表，因此可以在 ul 上使用 inline-block 而不是 display:table。 您需要在单独的规则中声明 display:inline; 在 inline-block 之后用于 IE。

【讨论】：

【解决方案3】：

我会考虑使用 CSS 并将 margin: 0 auto 放在具有最大宽度容器的 <ul> 上。

【讨论】：

如果你这样做，我认为如果你的 ul 例如只有 100px，但你的最大宽度容器是 200px，li 不会在页面中居中，而是在 200px 内左对齐宽度 ul。看看我在说什么jsbin.com/ubege
问题中提供的示例中已经完成了这两项工作。 #content ul 具有 margin: 20px auto 并且其容器 div #content 默认具有最大宽度。

【解决方案4】：

试试这个。它涉及不兼容性，但我真的不知道旧浏览器如何处理边距和填充以及所有这些，因为我只使用新浏览器。它只涉及对 CSS 的一些小改动。

/* I didn't style the other parts, so I'm taking them out to save space. */

#content {
    margin: 0 auto;
}

#content ul {
    border-top: solid 1px #666666;
    border-bottom: solid 1px #666666;
    text-align: left;
    font-size: 150%;
    list-style-type: none;
    margin: 20px auto;
    padding: 0px;
    width: 202px;
}

#content li {
    border-left: solid 1px #666666;
    border-right: solid 1px #666666;
    margin: 0 auto;
    padding: 0;
    width: 200px;
}

编辑：我想澄清我所做的更改。我改变了内容的对齐方式，但老实说，你可以把它改回来，我认为它没有效果。

我最初所做的是设置一个固定宽度并将 li 元素居中，您没有任何样式。这只是内容的中心。你放置的边框在ul，所以它很宽，但如果我们把它放在li，那么我们会有很多盒子。所以，我拆分了边框样式。 #content ul 之所以有 202px 的宽度，是因为边框在宽度的外侧。

我希望解释清楚地说明它为什么起作用。祝你好运！我在 Google Chrome 中对此进行了测试。

【讨论】：