内联列表垂直对齐

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

定义相对于零件的高度通常只适用于具有position:absolute的元素。原因是，周围元素的高度通常由其子女决定。如果你让孩子的身高相对于父母，你会有一个无休止的循环：）

所以使用这个代码会让你的li有100%的高度，但你的#nav的高度不会随着ul长度的增加而改变。

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

使用display:table而不是内联块方法可以保持的功能

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

Answer 3

也许您可以使用li:的表单元格

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

这适用于ie8+
如果使用：

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

有一些问题，在标签