CSS vertical-align属性的使用方法

这两天写个页面css的时候用到了vertical-align属性。使用过程中踩到了坑，所以总结例如以下：

vertical-align的定义

W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

同意指定负长度值和百分比值。

这会使元素减少而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

文本通常依据不可见的基线进行对齐的。而字母的底部位于基线之上。vertical-align属性能够在文字的基线之上或之下提升或减少字母或图像。vertical-align属性的值有baseline、sub、super、top、text-top、middle、bottom、text-bottom、、等，当中初始值为baseline。

baseline(基线)——将子元素的基线与父元素的基线相对齐。

对于没有基线的元素，如图像或对象，则使它的底部与父元素的基线对齐。

sub(以下)——把元素置于下方(下标)，确切地说是使元素的基线对齐它的父元素首选的下标位置。

super(上面)——把元素置于上方(上标)。确切地说是使元素的基线对齐它的父元素首选的上标位置。

text-top(文本顶部)——使元素的顶部与其父元素最高字母的顶部相对齐。

top(顶部)——使元素的顶部与行中最高事物的顶部相对齐。

middle(中间)——使元素垂直居中。

bottom(底部)——使元素的底部与行中最低事物的底部相对齐。

text-bottom(文本底部)——使元素的底部与其父元素字体的底部相对齐。

vertical-align的解读

W3C上对vertical-align的定义,大体上能够分为两个部分：

第一种使用方法。先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这非常easy理解，假设给一个表格的td加一个vertical-align:middle的样式。表格里面的内容会垂直居中，相同的假设给一个vertical-align:bottom就会底部对齐。假设给一个vertical-align:top就会顶部对齐。

另外一种使用方法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的。能够打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，例如以下图：

假设a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，例如以下图：

比方，img和span一起出现。要想文字对齐图片的中间位置，就须要为图片加入img{vertical-align:middle;}

再比方input和span连用时，谷歌火狐IE8以上版本号里默认的是span在input的中间位置，但ie6/ie7里，span底部和input底部对齐。实现统一的办法就是给input加入input{vertical-align:middle;}，要想它们垂直方向上的中线对齐。就同一时候也为span设置span{vertical-align:middle;}

vertical-align的使用

1.用于内联元素

以下以图像的垂直对齐为样例说明一下vertical-align属性的使用方法。

img{ vertical-align:middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>

2.用于表格

vertical-align属性能够直接用于表格单元格，效果相当于HTML中的valign属性。

td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个測试</td><td>这是一个測试</td></tr><tr><td>这是一个測试</td><td>这是一个測试</td></tr></table>

3.用于块元素

vertical-align属性是不适用于块元素的。这就是为什么有些人使用vertical-align属性无效的原因。可是我们能够使用display属性，设置其值为table-cell。将块元素转化为单元格，然后再使用vertical-align属性。

div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>

须要注意的是。上面这样的方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这样的使用方法，而Chrome、火狐却能支持。

为了兼容ie6/7能够为div添加下面属性

div{
*display:block; *font-size:175px;/*高度为200px。  则200*0.873约为175px* 撑开/  }

**

特别提醒：vertical-align仅仅对行内元素有效，对块级元素无效。

**