vertical-align属性-创新互联

定义和用法：

vertical-align 属性设置元素的垂直对齐方式。

浏览器支持：

所有浏览器都支持 vertical-align 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

语法：

vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit

参数：

适用于：行内元素 和 单元格（table-cell）元素

1、用于行内元素

看看我的位置

img{ 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;}

2、用于表格

    
        
        
    
    
        
        
    
这是一个测试
这是一个测试
这是一个测试
这是一个测试

td{ height:40px; vertical-align:middle;}

3、用于块级元素

vertical-align不适用于块级元素，但是可以设置父元素的display属性为table-cell，将块级元素转为单元格，然后再使用vertical-align属性

div{width:500px; height:200px; display: table-cell; vertical-align: middle; border:1px blue solid;}

IE8及以上浏览器效果：(Chrome, FireFox, Opera均正常显示)

IE7，IE6浏览器效果：

为了解决IE6，7下的问题，我们可以采用css hack的方式

div{
    width:500px; height:200px; display: table-cell; vertical-align: middle; border:1px blue solid;
    /*用于IE6，7*
    *display:block; *line-height:200px;
}

再次检查IE下各版本的效果

更多更全的讲解，可查阅 http://www.ddcat.net/blog/?p=233

http://blog.sina.com.cn/s/blog_51048da701018490.html

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。