搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > CSS教程
    CSS实现水平垂直居中
        发布时间:2015-11-13 16:51:51    发布作者:admin

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

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

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

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

    复制代码FwE三九网站目录

    HTML代码:FwE三九网站目录

    1. <div class="cell center1">
      FwE三九网站目录

    2.      <img src="4.jpg"/>
      FwE三九网站目录

    3. </div>
      FwE三九网站目录

    4. <div class="cell center1">
      FwE三九网站目录

    5.      <span>ssssssssss</span>
      FwE三九网站目录

    6. </div>
      FwE三九网站目录


    7. FwE三九网站目录

    复制代码FwE三九网站目录

    效果图:
    FwE三九网站目录

    FwE三九网站目录

    FwE三九网站目录

    FwE三九网站目录


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

    第二种
    修改CSS代码:FwE三九网站目录

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

    2. line-height: 200px;}
      FwE三九网站目录

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

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

    5. vertical-align: middle; }FwE三九网站目录

    复制代码FwE三九网站目录

    HTML结构:FwE三九网站目录

    1. <div class="cell center2">
      FwE三九网站目录

    2.      <span>
      FwE三九网站目录

    3.           <img src="4.jpg"/>
      FwE三九网站目录

    4.      </span>
      FwE三九网站目录

    5. </div>
      FwE三九网站目录


    6. FwE三九网站目录

    复制代码FwE三九网站目录

    效果图:
    FwE三九网站目录

    FwE三九网站目录

    FwE三九网站目录

    FwE三九网站目录


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

    第四种

    CSS代码:FwE三九网站目录

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

    2. text-align: center }
      FwE三九网站目录

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

    4. display: inline-block; }FwE三九网站目录

    复制代码FwE三九网站目录

    HTML代码:FwE三九网站目录

    1. <div class="cell center4">
      FwE三九网站目录

    2.     <div>
      FwE三九网站目录

    3.       居中
      FwE三九网站目录

    4.     </div>
      FwE三九网站目录

    5. </div>
      FwE三九网站目录


    6. FwE三九网站目录

    复制代码FwE三九网站目录

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

    第五种
    CSS代码:FwE三九网站目录

    1. .center5 { text-align: center}
      FwE三九网站目录

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

    3. background-color: #333;}FwE三九网站目录

    复制代码FwE三九网站目录

    HTML代码:FwE三九网站目录

    1. <table >
      FwE三九网站目录

    2.     <tr>
      FwE三九网站目录

    3.       <td class="cell center5">
      FwE三九网站目录

    4.         <div>
      FwE三九网站目录

    5.          居中
      FwE三九网站目录

    6.          </div>
      FwE三九网站目录

    7.        </td>
      FwE三九网站目录

    8.      </tr>
      FwE三九网站目录

    9. </table>FwE三九网站目录

    复制代码FwE三九网站目录

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


    FwE三九网站目录

    最新资讯
    最新收录
    热门资讯