Question

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（灰色背景）？

Answer 1

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

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

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

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

http://jsfiddle.net/RfF7t/

Answer 2

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

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

HTML / CSS - 垂直居中于块元素中的ul

2 个答案: