关闭

css布局-多行文字垂直居中

标签: css
211人阅读 评论(0) 收藏 举报
分类:

场景:父元素 高度固定,如何使其中的文字垂直居中?

方法一:

    <style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;}  
        span{display: inline-block;vertical-align: middle;line-height: 22px;}  
    </style>  
      
    <div>  
        <span>测试文字测试文字</span>  
    </div>  
    <div>  
        <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>  
    </div>  

结果截图:


关键样式:

① 父元素(这里是div)设置和高度一致的 line-height (这里是200px)--- 由后面的vertical-align定义看,这是为了设置div的基线

② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle;  --- inline水平的元素无法设置line-height。所以这里要设置inline-block。


重新审视一下 CSS vertical-align 属性 的定义:

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

由以上需要注意 :

① vertical-align属性应该设置到 行内元素上(行内块元素也可)

② 如果文字的总高度超出了 容器(这里是div)的高度,那么垂直居中会失效。

③ ie7以下 span结束标签和内部内容不能有间隔空白,也就是说span的结束标签和内部内容要连在一起。


方法二:

利用display:table-cell。

    <style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        div{display: table-cell;width: 200px;border:1px solid blue;vertical-align: middle;}  
    </style>  
      
    <div>  
        <span>测试文字测试文字</span>  
    </div>  
    <div>  
        测试文字测试文字  
    </div>  
    <div>  
        <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>  
    </div>  
结果截图:


优点:等高布局,无需设置高度,文字轻松实现垂直居中

缺点:ie7以下不兼容!


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:53677次
    • 积分:1148
    • 等级:
    • 排名:千里之外
    • 原创:53篇
    • 转载:52篇
    • 译文:0篇
    • 评论:33条
    文章分类
    最新评论
    站长统计