如何在我的标题中的我的ul中垂直居中放置li？

Question

我想垂直放置我的li在标题的ul中。 您可以在此处签出JSBin： http : //jsbin.com/xeven/1/edit

我看不到我在做什么错？ 有人能帮我吗？ 我也想把整个事情放在中心……谢谢！

Answer 1

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

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

jsFiddle示例

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

Answer 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