纯CSS实现多行文字垂直居中几种方法解析

本文转自 博客园-古兰情 博主

原文链接:https://www.cnblogs.com/goloving/p/7657544.html

 

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

1、table布局:

利用display:table+display:table-cell的方法

<style>
    .middle-box{
        display: table; /*重点*/
        height: 300px;border: 1px solid #000;  /*外层高度固定*/
        background-color:yellow;
    }
    /*重点:table-cell布局*/
    .middle-inner{
        display: table-cell;
        vertical-align:middle;
        text-align:center;
    }
</style>

<div class="middle-box">
    <div class="middle-inner">
        华为创立于1987年,是全球领先的ICT(信息与通信)基础设施和智能终端提供商,
        我们致力于把数字世界带入每个人、每个家庭、每个组织,构建万物互联的智能世界。
        目前华为有18.8万员工,业务遍及170多个国家和地区,服务30多亿人口。
    </div>
</div>

实现效果:

 

利用display:table-cell实现等高布局

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

实现效果:

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

缺点:ie7以下不兼容!

2.利用line-height和vertical-align:

<style>  
  *{
    padding: 0;
    margin:0;
    font-size: 12px;
  }  
  div{
    float: left;width: 200px;
    height:200px;margin: 10px;
    border:1px solid #000; 
    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的结束标签和内部内容要连在一起。

 

   还没有人评论 到此为止 | 继续阅读 >>