[css]Vertical-align详解及实际应用
2011-04-13 17:42 Matin 阅读(1153) 评论(0) 编辑 收藏 举报vertical-align这个属性,按照规范的说法:
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
该属性决定一个行内元素产生的框在一个线框内垂直方向的位置。
它有以下的几个属性可选:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit;
了解这个属性之前,应该明白什么是行内框,什么又是行框?
a.行框是指本行的一个虚拟的矩形框,其高度等于本行内所有元素中行高最大的值。
b.行内框等于内容区域,而设定行高则可以增加或者减少行内框 的高度,即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边;
我想这个属性最常用的地方应该是图片和文本的对齐;img{vertical-align: middle;}
;而且能良好的跨浏览器;
middle的计算方法是:将框的垂直中间点对齐父框的基线,加上父的x(ex)高度的一半。大部分浏览器认为1ex = 0.5em,因此会将基线以上四分之一em处作为中线来对齐。
不过,这个属性因为涉及到行高等一些不同浏览器差异化表现的问题,使得这个属性使用起来有些复杂;当你在table-cells中使用vertical-align时,只有top,bottom,middle三种较为安全,或者说可控性较强;
(1)vertical-align在table-cells中使用:
top,bottom,middle:这3种个浏览器大都表现一致;
text-bottom:在IE6下和bottom的效果一样,在sarifi4中和top的效果一样;但是其他浏览器则没有变化;
sub:middle 在IE 6下产生middle的效果,在Safari 4中产生top的效果;
(2)vertical-align:bottom在IE6,7的怪异表现;
如果你测试这个bottom属性(前提:排除table-cell,因为table-cell下浏览器的表现都差不多),在IE的结果会让你很惊讶,它完全和其他的标准浏览器甚至IE8都不一样,甚至IE6和IE7的表现都不一样;【注:以下测试是存在行内替换元素的情况下,比如行内有img/input等】
[IE6/7中]:使用vertical-align:bottom,行内替换元素并不是与行框底部对齐,而是把半差异间距(没有设置line-height值时,其默认为normal,一般是1.0-1.2之间,因浏览器不同为不同)算在行内替换元素的两侧,使得行内替换元素不与真正的行框底部对齐,而与行内框底部对齐;显然,这是不符合规范的,或者说是错误的;
在设置了line-height的情况下,IE6还会出现失效;解决的办法:用补白设置magrin的方法“伪造”;
还有,使用这个属性的时候,行内替换元素不会被强迫与其他文本对齐,比如,有2个行内替换元素,他们的高度大于行内框高度,那么他们就会无视文本对齐;
(3)vertical-align之于块级元素:
首先,vertical-align只能使用于行内元素和表格单元元素,那么,是不是就是说其和块级元素不沾边呢?别忘记inline-block这个属性,这个徘徊与A与C之间的属性,用这个inline-block与vertical-align又能做什么呢?
inline-block不被IE6,7支持,于是被千方百计的伪出类似的效果:inline+layout;根据我前面的关于块级上下文的文章,(layout能够产生与BFC(Block-formatting-contexts)类似的块级范围),然后使用inline,有点内联块元素的味道;
下面这个就是用vertical-align+inline-block实现对齐的实例:
css部分:
/*这里,font-size有关于IE6下的li是否出现空隙,具体的可以找下这个bug的解决方法*/ body{font-size:14px;} div,p,h4,span,li,ul{ margin:0; padding:0;} #works{ width:500px; margin:0 auto;} #works ul{ list-style:none;} /* zoom:1;*display:inline;为了伪造出和inline-block一样的效果*/ #works li{margin-left:10px;width:150px; display:inline-block; vertical-align:top; zoom:1;*display:inline; margin-top:5px;} #works li h4{width:100%; background:#FF00FF} /*这里,不设置float,会出现间隙*/ #works li img{ float:left;} p{width:100%; background:#006666}
Html部分:
<div id="works"> <ul> <li> <h4>this is a img</h4> <img src="1111.gif"/> <p> <span>firstPic.NO:1</span> <span>author:someBody</span> </p> </li> ... </ul> </div>
Result展示:
按照一般做法,如果使用float,那么"#works”下每个div的高度就需要固定为一样,这样,灵活性就差很多,因为你无法确定,未来的某个div的高度高于你设定好的,这种通过使用vertical-align方法提供了良好的灵活性,而且跨浏览器方面也不错;
参考文章:
【1】RichInStyle.com - proposals: the inline box model