CSS 在导航栏的 float 中垂直居中文本

Question

我正在尝试在 html+css 中创建一个导航栏，它看起来像以下链接中的图像:

http://i.imgur.com/5PEhv.png

基本上，我在左侧 float 矩形/div 中有一些灰色的大文本，在右侧 float 矩形/div 中有一个较小字体的红色链接列表，我希望该文本垂直居中而不必诉诸摆脱 float 并调整灰色和红色框的 margin-left/margin-right 。这可能吗？如果可能，如何实现？

Answer 1

似乎很难在 div 中垂直排列文本。

诀窍在于以下内容。

假设以下 HTML:

<div id="parent">
<p id="child"> text</p>
</div>

现在您可以通过执行以下技巧来垂直对齐文本。

#parent{
    display: table;
    ....
 }

 #child{
    display: talble-cell;
    vertical-align: center;
 }

这样做会导致以下结果。 http://jsfiddle.net/RLchH/1/