Question

我想把我的李在我的标题中垂直居中。你可以在这里查看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 example

我删除了浮动规则，并将显示类型从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

如何在我的标题中将我的li垂直居中？

2 个答案: