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...
  • hdchangchang
  • hdchangchang
  • 2015年07月28日 16:59
  • 12085

CSS垂直水平居中,display:flex,布局,文字属性的一些零碎

body的height不可少,如body{height:100%},否则子元素会不认,如果子元素的高直接以百分比写的话,会不显示。因为识别不出来。 宽度则不会,因为浏览器的宽度是固定的,高度会滚,...
  • github_36487770
  • github_36487770
  • 2017年05月10日 11:36
  • 3125

css设置标签的水平与垂直居中,定位与弹性盒布局的的结合

在一般情况下利用css在对标签进行水平与垂直居中的时候利用弹性盒布局可以轻易解决,只需设置父级标签的主轴与交叉轴居中即可,代码如下: ...
  • WULIhuihui
  • WULIhuihui
  • 2016年09月24日 22:29
  • 5415

div中多行文字垂直居中

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

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

大小不固定的图片、多行文字的水平垂直居中 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx...
  • yzbben
  • yzbben
  • 2016年07月14日 01:29
  • 405

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

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

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

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

lineheight使图片多行文字垂直居中

多行文字垂直居中 html部分:         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptat...
  • u013742084
  • u013742084
  • 2016年06月27日 19:37
  • 313

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

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

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

本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图...
  • dxh_0829
  • dxh_0829
  • 2014年12月30日 19:58
  • 566
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局-多行文字垂直居中
举报原因:
原因补充:

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