回旧版

我爱导航网_我爱网址导航_网站酷站免费导航,尽在我爱导航!

CSS实现水平垂直居中

今天对元素的水平垂直居中复习了一下,总结了这篇文章。   
第一种:
CSS代码:

  1. .cell{ margin:10px;background-color: #ccc; width:200px; height:200px; color:#457344; }

  2. .center1{text-align: center;  line-height: 200px;}

  3. .center1 img,.center1 span{vertical-align: middle;}

复制代码

HTML代码:

  1. <div class="cell center1">

  2.      <img src="4.jpg"/>

  3. </div>

  4. <div class="cell center1">

  5.      <span>ssssssssss</span>

  6. </div>


复制代码

效果图:


这种方法使用text-align和vertical-align,line-height来实现居中,不过只适用于行内元素且不兼容IE6,第二种居中将解决IE6兼容问题。

第二种
修改CSS代码:

  1. .center2{ text-align: center; _position: relative; 

  2. line-height: 200px;}

  3. .center2 span{ _position: absolute;  top:50%; left:50%;}

  4. .center2 img{_position: relative; top:-50%;left:-50%;

  5. vertical-align: middle; }

复制代码

HTML结构:

  1. <div class="cell center2">

  2.      <span>

  3.           <img src="4.jpg"/>

  4.      </span>

  5. </div>


复制代码

效果图:


因为IE6,7不支持table-cell,所以IE6,7中显示不正常。设置左右边距的auto来实现水平居中。

第四种

CSS代码:

  1. .center4{ display: table-cell; vertical-align: middle;

  2. text-align: center }

  3. .center4 div{width:100px; padding:10px; background:#333; 

  4. display: inline-block; }

复制代码

HTML代码:

  1. <div class="cell center4">

  2.     <div>

  3.       居中

  4.     </div>

  5. </div>


复制代码

因为IE6,7不支持table-cell,所以IE6,7中显示不正常。设置元素的display:inline-block而具有行内元素的特性,因此可用text-align:center使其水平居中。

第五种
CSS代码:

  1. .center5 { text-align: center}

  2. .center5 div{ display: inline-block; width:100px;padding: 10px;

  3. background-color: #333;}

复制代码

HTML代码:

  1. <table >

  2.     <tr>

  3.       <td class="cell center5">

  4.         <div>

  5.          居中

  6.          </div>

  7.        </td>

  8.      </tr>

  9. </table>

复制代码

既然IE6,7不支持table-cell,于是干脆使用表格嵌套使其居中,因为td已经默认设置了vertical-align:middle。


文章来自:我爱导航,未经允许不得转载!:首页 > 教程收藏 > 建站经验 » CSS实现水平垂直居中

感觉不错,很赞哦! ( )

相关推荐

网友评论