码迷,mamicode.com
首页 > 其他好文 > 详细

三种常用垂直居中的方法

时间:2015-11-22 16:00:33      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

有时我们需要对元素内部内容进行垂直居中显示, 下面介绍三种我学到的简单的垂直居中方法

第一种: 利用td默认的vertical-align:middle特性达到多行文本垂直居中效果

  CSS:

  

    .wrap{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

 

  HTML:

    <table class="wrap">
        <tr>
            <td>需要居中的内容需要居中的内容需要居中的内容需要居中的内容需要居中的内容需要居中的内容需要居中的内容<td>
        </tr>
    </table>

 

  效果:

  技术分享

 

第二种: 对容器有固定高度的单行文本设置line-height等于容器height达到垂直居中效果

  CSS:

    .wrap{
        width: 200px;
        height: 200px;
        line-height: 200px;
        border: 1px solid red;
    }

 

  HTML:

    <div class="wrap">
        需要居中的内容    
    </div>

 

  效果:

技术分享

  注意: 这种方法只对单行文本有效

第三种: 使用新的display:table-cell,达到垂直居中效果

  CSS:

    .wrap{
        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align:middle;
        border: 1px solid red;
    }

 

  HTML:

    <div class="wrap">
        需要居中的内容
        需要居中的内容
        需要居中的内容
        需要居中的内容    
    </div>

 

  效果:

  技术分享

 

  注意: IE6和IE7不支持这个CSS属性值

三种常用垂直居中的方法

标签:

原文地址:http://www.cnblogs.com/xdongliang/p/4985909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!