1

我正在尝试在 html+css 中创建一个导航栏，类似于以下链接中的图像：

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

基本上，我在左侧浮动矩形/ div 中有一些灰色的大文本，在右侧浮动矩形/div 中有一个较小字体的链接列表，我希望该文本垂直居中而不必求助于摆脱浮动和调整灰色和红色框的左边距/右边距。这可能吗？如果可以，怎么做？

4

2 回答 2

0

如果您知道红色容器的高度，那就很容易了。以这种方式提供HTML：

<div class="red">
    <a href="Home">Home</a>
    <a href="...">...</a>
    <a href="etc.">etc.</a>
</div>

而CSS为：

.red {line-height: 50px; vertical-align: middle; background: #f00; font-family: tahoma, sans-serif; text-align: center; font-size: 11px; font-weight: bold;}
.red a {color: #fff; text-decoration: none;}

看看这个小提琴！希望能帮助到你！:)

于 2012-06-23T13:05:57.960 回答
0

在 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/

于 2012-06-23T13:47:45.850 回答