代码改变世界

[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;};而且能良好的跨浏览器；12副本

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展示：

15

按照一般做法，如果使用float，那么"#works”下每个div的高度就需要固定为一样，这样，灵活性就差很多，因为你无法确定，未来的某个div的高度高于你设定好的，这种通过使用vertical-align方法提供了良好的灵活性，而且跨浏览器方面也不错；

参考文章：

【1】RichInStyle.com - proposals: the inline box model

【2】How (Not) To Vertically Center Content

【3】What is Vertical Align?