解决一个在div布局中文字的上下居中问题

在用div做页面时遇到一个问题.就是在div中的文字无法上下居中显示.用了 vertical-align:middle;属性也不可以.奇怪...

具体代码如下.或需有的朋友也遇到过类似问题.

css部分:

#toplink{
 width: 580px;
 height: 24px;
 float: right;
}
.topfont{
 font-size: 12px;
 vertical-align:middle;
}

<div id="toplink"><span class="topfont">文字内容</span></div>

解决办法

.topfont{
 font-size: 12px;
 vertical-align:middle;
 line-height:24px
}

在网上搜了一些相关的资料.这里贴出来.便于大家理解.

W3C官方对vertical-align做了下面的解释：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。前面那个 span定义了一个60px的高度，但是这个span的Box中存在很多行，那段文本并不能对齐到span的中央。因此希望那段文本对齐span的中行， 需要给它定义一个line-height的属性，让line-height为60px，作用于一行的vertical-align就按你的想法工作了。

table的单元格，因为是一行内的元素，因此vertical-align按照我们的想法来工作，但是在span中并不是这样的。