分类目录 共计收录4278站; 资讯文章4395篇; 待审网站 646站; 当月收录4站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

CSS实现水平垂直居中

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

  1. .cell{ margin:10px;background-color: #ccc; width:200px; height:200px; color:#457344; }
    ZkY网站目录

  2. .center1{text-align: center;  line-height: 200px;}
    ZkY网站目录

  3. .center1 img,.center1 span{vertical-align: middle;}ZkY网站目录

复制代码ZkY网站目录

HTML代码:ZkY网站目录


  1. ZkY网站目录


    ZkY网站目录

  2.      
    ZkY网站目录


  3. ZkY网站目录


  4. ZkY网站目录


    ZkY网站目录

  5.      ssssssssss
    ZkY网站目录


  6. ZkY网站目录


  7. ZkY网站目录

复制代码ZkY网站目录

效果图:
ZkY网站目录

ZkY网站目录


ZkY网站目录


ZkY网站目录


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

第二种
修改CSS代码:ZkY网站目录

  1. .center2{ text-align: center; _position: relative; 
    ZkY网站目录

  2. line-height: 200px;}
    ZkY网站目录

  3. .center2 span{ _position: absolute;  top:50%; left:50%;}
    ZkY网站目录

  4. .center2 img{_position: relative; top:-50%;left:-50%;
    ZkY网站目录

  5. vertical-align: middle; }ZkY网站目录

复制代码ZkY网站目录

HTML结构:ZkY网站目录


  1. ZkY网站目录


    ZkY网站目录

  2.      
    ZkY网站目录

  3.          
    ZkY网站目录

  4.      
    ZkY网站目录


  5. ZkY网站目录


  6. ZkY网站目录

复制代码ZkY网站目录

效果图:
ZkY网站目录

ZkY网站目录


ZkY网站目录


ZkY网站目录


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

第四种

CSS代码:ZkY网站目录

  1. .center4{ display: table-cell; vertical-align: middle;
    ZkY网站目录

  2. text-align: center }
    ZkY网站目录

  3. .center4 div{width:100px; padding:10px; background:#333; 
    ZkY网站目录

  4. display: inline-block; }ZkY网站目录

复制代码ZkY网站目录

HTML代码:ZkY网站目录


  1. ZkY网站目录


    ZkY网站目录

  2. ZkY网站目录


    ZkY网站目录

  3.       居中
    ZkY网站目录

  4.    
    ZkY网站目录


  5. ZkY网站目录


  6. ZkY网站目录

复制代码ZkY网站目录

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

第五种
CSS代码:ZkY网站目录

  1. .center5 { text-align: center}
    ZkY网站目录

  2. .center5 div{ display: inline-block; width:100px;padding: 10px;
    ZkY网站目录

  3. background-color: #333;}ZkY网站目录

复制代码ZkY网站目录

HTML代码:ZkY网站目录

  1. ZkY网站目录


    ZkY网站目录

  2.    ZkY网站目录


    ZkY网站目录

  3.       ZkY网站目录


    ZkY网站目录

  4. ZkY网站目录


    ZkY网站目录

  5.          居中
    ZkY网站目录

  6.          
    ZkY网站目录

  7.       
    ZkY网站目录

  8.      
    ZkY网站目录


  9. ZkY网站目录

复制代码ZkY网站目录

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


ZkY网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->