如何在标题中的 ul 中垂直居中我的 li？答案

【问题标题】：How do I vertically center my li's in my ul in my header?如何在标题中的 ul 中垂直居中我的 li？
【发布时间】：2014-03-11 09:27:24
【问题描述】：

我想垂直居中我的 li 在我的标题 ul 中。你可以在这里查看 JSBin：http://jsbin.com/xeven/1/edit

我看不出我在这里做错了什么？有人能帮我吗？我也想把整个事情放在中心...谢谢！

【问题讨论】：

标签： html css header html-lists vertical-alignment

【解决方案1】：

将您的 .header ul li 规则更改为：

.header ul li {
  display:inline-block;
  vertical-align:middle;
  text-transform: uppercase;
  margin-left: 35px;
  letter-spacing: 3px;
}

jsFiddle example

我删除了浮动规则并将显示类型从 table-cell 更改为 inline-block。

【讨论】：

【解决方案2】：

您可以创建一个固定宽度的内部标题并将其居中。
这样背景仍然会填充 100% 的屏幕宽度，但您可以将菜单居中。

HTML

<div class="header">
    <div class="inner-header">
      <ul>
        <li><a href="#">
          <div id="logo">BASE</div>
        </a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">features</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>
  </div>

CSS

.inner-header{
  margin:0 auto;
  width:400px;
}

http://jsbin.com/xeven/3/edit

【讨论】：