CSS：不能居中 UL答案

【问题标题】：CSS: can't center a ULCSS：不能居中 UL
【发布时间】：2014-06-26 20:17:19
【问题描述】：

在this page，我有一个页脚菜单#menu-footer-menu； “关于 - 选择你的城市 - 步行如何工作......”由 Wordpress 生成。

<div class="menu-footer-menu-container">
  <ul id="menu-footer-menu" class="menu">
    <li id="menu-item-143"><a href="#">About</a></li>
    <li id="menu-item-151"><a href="#">Select Your City</a></li>
    <li id="menu-item-162"><a href="#">How Walks Work</a></li>
    <li id="menu-item-160"><a href="#">FAQs</a></li>
    <li id="menu-item-166"><a href="#">Blog</a></li>
    <li id="menu-item-153"><a href="#">Partners</a></li>
    <li id="menu-item-154"><a href="#">Press</a></li>
    <li id="menu-item-144"><a href="#">Privacy Policy</a></li>
    <li id="menu-item-145"><a href="#">Site Map</a></li>
    <li id="menu-item-146"><a href="#">Terms &#038; Conditions</a></li>
  </ul>
</div>

我想使这个菜单居中。

我尝试了以下 CSS，但没有成功：

div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
  list-style-type: none;
  width: 760px !important;
  margin: 0 auto !important;
  display: inline-block !important;
}
ul#menu-footer-menu li {
  display: inline-block !important;
  margin-right: 14px;
  margin-right: 1rem;
}

【问题讨论】：

标签： css html-lists centering

【解决方案1】：

你有两种方法可以做到这一点

宽度退化中心标签

   <center>
    <ul>
      ...
    </ul>
   </center>

创建另一个 div 以强制居中

.center { 边距：自动；文本对齐：居中； }
```
   <div class="center">
    <ul>
      ...
    </ul>
   </div>
```

注意：标签必须是inline-block。

width text-align:center;

   ul{ text-align: center; }

   <center>
    <ul>
      ...
    </ul>
   </center>

【讨论】：

【解决方案2】：

尝试添加 CSS 样式：

.menu-footer-menu-container
{
  text-align: center;
}

【讨论】：

【解决方案3】：

使用下面的 css 而不是你所拥有的。我只是更改了 ul#menu-footer-menu.menu 的显示以阻止其他任何内容。

div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
  list-style-type: none;
  width: 760px !important;
  margin: 0 auto !important;
  display: block !important;
}
ul#menu-footer-menu li {
  display: inline-block !important;
  margin-right: 14px;
  margin-right: 1rem;
}

【讨论】：

Err... 这个答案我打败了你：P

【解决方案4】：

在 css 中为 #footer-menu 添加更多样式 text-align:center。

【讨论】：

@Steve 你看其他答案了吗...？
@Steve 那么你是如何得出这个添加（额外的 css = 更慢的解析）比修改 css 表达式更好的结论的？

【解决方案5】：

使用display:block 而不是inline-block

ul#menu-footer-menu.menu {
  list-style-type: none;
  width: 760px !important;
  margin: 0 auto !important;
  display: block !important;
}

【讨论】：

在 chrome 中测试并且它正确居中 - 我应该想象这对于所有像样的浏览器都是如此，但 x-test

【解决方案6】：

您需要添加一个宽度为 100% 的包装元素以使您的 div 居中。

喜欢：

<div class="wrapper">
<div class="menu-footer-menu-container">
  ...
</div>


.wrapper{ width:100% }

【讨论】：

在这种情况下不正确