vertical-align的使用

04 May 2015

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属性。

                    需要注意的是，上面这种方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这种用法，而Chrome、火狐却能支持。
                    为了兼容ie6/7可以为div添加以下属性
                    div{
                    *display:block; *font-size:175px;/*高度为200px，  则200*0.873约为175px* 撑开/  }