0

的HTML

<nav class="cf">
  <div class="logo">
    <a href="#">Logo</a>
  </div>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

CSS

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: red;
}

nav {
  background: grey;
  text-align: center;
}

nav ul {
  font-size: 0px;
  text-align: right;
}

nav li {
  font-size: 14px;
  display: inline;
}

nav li a {
  display: inline-block;
  width: auto;
  background: green;
}

.logo {
  font-size: 33px;
  background: orange;
  float: left;
}

小提琴
http://jsfiddle.net/M9Sdd/

问题
如何ul在（灰色背景）内垂直居中（红色背景nav）？

4

2 回答 2

3

您也可以在不添加其他元素的情况下使用它：

nav {
    display: table;
    width: 100%;
}

ul {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 100%;
}

*注意：我只能在 Chrome 中测试代码。

http://jsfiddle.net/RfF7t/

于 2013-01-24T00:23:41.603 回答
0

在 ul 周围添加一个包装器，使其成为表格单元格并垂直居中对齐。

http://jsbin.com/otucom/4/edit

于 2013-01-24T00:08:03.763 回答