【css中解决方案】css中解决vertical-align: middle垂直居中无效方法

【www.bbyears.com--样式布局】

div水平居中很容易，设置css样式 text-align: center;  就可以了。

垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

第一种方法：通过一个空白图片可以达到垂直居中的效果。

 代码如下 复制代码

 
 
 
 
  
  
   
   
  
 

 

个人觉得vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。

第二种方法：往div里面加表格。

 代码如下 复制代码
   
   
       
           
               
                   
                       
                   
               
           
       
   

在表格里就很容易设置居中了。

经测试，这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。

另外，说一下overflow: hidden; 这个属性，当图片大小超出div的大小时，会影藏超出的部分。不设置的话，图片会全部显示，覆盖在div上。

本文来源：http://www.bbyears.com/css/34790.html