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

转载 2016年08月31日 11:59:51

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

方法一:

    <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以下不兼容!


相关文章推荐

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

场景一:父元素 高度固定,如何使其中的文字垂直居中? 代码: *{padding: 0;margin:0;font-size: 12px;} div{flo...

div中多行文字垂直居中

  • 2016年07月21日 14:16
  • 678B
  • 下载

div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的...
  • yjl3039
  • yjl3039
  • 2015年06月04日 18:11
  • 332

大小不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示,...

大小不固定,多行文字的垂直居中

单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码:height:3em; l...

深入理解盒子——模型文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

文本垂直居中方法比较常用,比如一定高度的盒子中,未知高度的盒子等常用于总结下文本垂直居中的以下方法:   1.单行文本垂直居中: 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设...

图片、多行文字的水平垂直居中

本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂...

大小不固定的图片和多行文字的垂直水平居中

  • ecole
  • ecole
  • 2012年05月07日 14:32
  • 393

垂直居中一张图片和多行文字在固定的盒子内

HTML代码 CSS代码.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-a...

div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的...
  • yezitoo
  • yezitoo
  • 2017年04月05日 10:22
  • 74
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局-多行文字垂直居中
举报原因:
原因补充:

(最多只允许输入30个字)