内联列表垂直对齐

Question

我无法弄清楚为什么我的列表没有垂直对齐。我将ul和li设置为父级的100％高度，但它似乎只是自身的100％。

我不想使用任何边距或填充来使它们垂直对齐。我怎么能强迫它成为父母的100％所以它会垂直在中间？

http://jsfiddle.net/qS5A6/

Answer 1

#nav li a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 15px 20px;
    line-height:90px; //add this
}

Answer 2

定义相对于parten的高度通常只适用于具有position:absolute的元素。原因是，周围元素的高度通常由他们的孩子决定。如果你使孩子的身高相对于父母而言你有无限循环：）

因此，使用此代码会使你的li具有100％的高度，但是#nav的高度不会随着ul的长度增加而改变。

http://jsfiddle.net/qS5A6/5/

使用display：table而不是inline-block方法将保留该功能

http://jsfiddle.net/qS5A6/6/

Answer 3

也许你可以使用table-cell for li：

#nav ul{    
    display: table;    
    height: 90px;
}

#nav li{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

这适用于ie8 +
如果您使用：

#nav li a{
     line-height:90px;
}

有一些问题，你不能拥有更多，而不是标签中的一行