样式表中定义
.content_head {border:1px solid #ccc;background:red;vertical-align:middle;line-height:20px;}
如果line-height改为height就不行
解释是:
- http://www.w3.org/TR/CSS21/visudet.html#line-height其中有一句
The inline boxes are aligned vertically according to their 'vertical-align' property.
- http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align另外有一句
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
可见vertical-align和line-height两个属性是连在一块定义的。vertical-align属性影响的垂直定位,是局限在“行”这个渲染单位里面的。所以需要先设置line-height,设定line box的高度,才能使用vertical-align。而height影响的是div这个block的高度,而不是line box。
谢谢BSD同学的解答。