如何在 div 中水平居中对齐 ul答案

【问题标题】：How to horizontally centre align a ul within a div如何在 div 中水平居中对齐 ul
【发布时间】：2017-01-05 21:26:56
【问题描述】：

我不确定为什么这个文本对齐中心没有生效。我查看了其他教程，我将textalign: center 应用于 div，然后将display: inline 应用于 ul。

这是我在实际构建 WordPress 主题时检查元素时来自浏览器的 HTML 代码的副本。

#footer-nav.collapse.navbar-collapse {
  text-align: center;
  font-size: 16px;
  color: #383434;
  margin-top: 30px;
  margin-bottom: 30px
}
div#footer-nav ul#menu-footer {
  display: inline-block;
}
ul#menu-footer li {
  padding: 0px 15px 0px 15px;
}

<div id="footer-nav" class="collapse navbar-collapse">
  <ul id="menu-footer" class="nav navbar-nav">
    <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a title="About" href="http://localhost/eat-sleep-kayak-wp/about/">About</a>
    </li>
    <li id="menu-item-366" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-305 current_page_item current_page_parent menu-item-366 active"><a title="Blog" href="http://localhost/eat-sleep-kayak-wp/blog/">Blog</a>
    </li>
    <li id="menu-item-290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a title="Newsletter" href="http://localhost/eat-sleep-kayak-wp/newsletter/">Newsletter</a>
    </li>
    <li id="menu-item-365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-365"><a title="Advertise" href="http://localhost/eat-sleep-kayak-wp/advertise/">Advertise</a>
    </li>
    <li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a title="Contact" href="http://localhost/eat-sleep-kayak-wp/contact/">Contact</a>
    </li>
  </ul>
</div>

【问题讨论】：

@pol 是 li 居中而不是 ul @elliot 你可以使用 CSS Flex 吗？
@AkinjideBankole 我不知道。
@ElliottDavidson 我刚刚在下面发布了一个代码笔链接，希望对您有所帮助。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

我正在使用 CSS Flex。您可以查看codepen link.

#footer-nav.collapse.navbar-collapse {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
    flex-direction: row;
  justify-content: center; // This centers the ul
  font-size: 16px;
  color: #383434;
  margin-top: 30px;
  margin-bottom: 30px;
}

div#footer-nav > ul#menu-footer {
    display: inline-block;
}

ul#menu-footer li {
  padding: 0px 15px 0px 15px;
}

【讨论】：

【解决方案2】：

好像你正在使用 Bootstrap 来构建它； bootstrap 的默认 CSS 是将导航栏设置为float，那么inline-block 属性对实现居中毫无作用。

这是默认的 CSS：

.navbar-nav {
    float: left;
    margin: 0px;
}

你可以在你的实际代码中添加这个：

div#footer-nav ul#menu-footer {
    display: inline-block;
    float:none;
}

BootplyDemo

【讨论】：

谢谢，不敢相信这只是一个简单的浮动导致了这个问题。再次感谢！