当前位置： 移动技术网 > IT编程>网页制作>CSS > 【css】利用line-height实现垂直居中

【css】利用line-height实现垂直居中

2020年07月24日  | 移动技术网IT编程  | 我要评论

替换元素与非替换元素

<body>
  <div>hello</div>
  <span>world</span>
  <img src="./imgs/路飞.jpg" alt="路飞">
</body>

div,span,img{
  width:100px;
  height:100px;
  background-color:lightskyblue;
  margin:10px;
}

在这里插入图片描述
块级元素可以设置width、height；
有的内联元素设置width、height后，无效，如span；
有的内联元素设置width、height后，有效，如img。img 是替换元素。
浏览器会根据 替换元素 的属性来显示内容，且通常都拥有自己的宽高或宽高比。
img是替换元素，浏览器会根据img的src属性显示图片；
input是替换元素，浏览器会根据input的type属性来显示控件；
canvas是替换元素，它的默认尺寸是300*150。
div、p、span等大部分html标签是 非替换元素，它们把要显示的内容交给浏览器，浏览器则直接显示出来。

行高

  • 非替换元素中的内联元素，比如span，button，它们的可视高度是由行高决定的。
  body{
    margin:0;
  }
  .container{
    width:160px;
    float:left;
    margin-right:10px;
  }
  .content{
    background-color:lightgoldenrodyellow;
  }
  .higher{
    line-height:50px;
  }

<body>
    <div class="container">
      <span class="content">这个世界随时都要崩塌</span>
      <span class="content">从前我太适应悲伤</span>
    </div>
    <div class="container">
      <span class="content higher">这个世界随时都要崩塌</span>
      <span class="content higher">从前我太适应悲伤</span>
    </div>
</body>

在这里插入图片描述

  • 由于幽灵空白节点的存在，块级元素的可视高度也受行高影响
    幽灵空白节点 这个说法来自 张鑫旭大神。
<body>
  <div><span></span></div>
</body>

在这里插入图片描述
将空span的display设置为 inline-block后，形成了一个 行框盒子，每个行框盒子前面都有一个幽灵空白节点，line-height:100px实际作用在幽灵空白节点上，因此撑高了div。
所以，由于幽灵空白节点的存在，块级元素的可视高度也受行高影响。

    div{
      line-height:100px;
      width:100px;
      border:1px solid lightskyblue;
    }

<body>
  <div><span style="display:inline-block"></span></div>
</body>

在这里插入图片描述

行距/半行距

  body{
    margin:0;
  }
  .container{
    width:160px;
    float:left;
    margin-right:10px;
  }
  .content{
    background-color:lightgoldenrodyellow;
    line-height:50px;
  }

<body>
  <div class="container">
    <span class="content">这个世界随时都要崩塌</span>
    <span class="content">从前我太适应悲伤</span>
  </div>
  <div class="container">
    <span class="content" style="height:50px;display:block">这个世界随时都要崩塌</span>
    <span class="content" style="height:50px;display:block">从前我太适应悲伤</span>
  </div>
  <div class="container">
    <span class="content" style="height:50px;display:block">这个世界随时都要崩塌</span>
  </div>
</body>

在这里插入图片描述
行距 = 行高 - 字体大小。
半行距 = 行距 / 2。
借助 行距的上下等分机制，可以使用 行高 实现 单行文本的垂直居中。

单行文本垂直居中

  div{
    width:200px;
    line-height:100px;
    border:1px solid lightskyblue;
    text-align:center;
  }

<body>
  <div>这个世界随时都要崩塌</div>
</body>

在这里插入图片描述

多行文本垂直居中

先看个例子。

<body>
  <div class="box">
    <p>这个世界随时都要崩塌 从前我太适应悲伤</p> 
  </div>
  <div class="box">
    <p>这个世界随时都要崩塌 从前我太适应悲伤</p> 
  </div>
  <div class="box">
    <p>这个世界随时都要崩塌 从前我太适应悲伤</p> 
  </div>
  <div class="box">
    <p>这个世界随时都要崩塌 从前我太适应悲伤</p> 
  </div>
</body>

  div{
    width:200px;
    line-height:100px;
    border:1px solid lightskyblue;
    text-align:center;
  }
  .box{
    float:left;
    margin-right:10px;
  }

在这里插入图片描述
用下面这个图来一步步理解。
“这个世界随时都要崩塌 从前我太适应悲伤”，这一行文本形成一个行框盒子。
line-height:20px作用在行框盒子前面的幽灵空白节点上， p 因此有了 (20px)*2=40px 的高度。
display:inline-block使p成为一个行框盒子，line-height:100px作用在行框盒子前的幽灵空白节点上，div因此有了 100px的高度。

在这里插入图片描述
如果没有p的vertical-align:middle，此时 多行文本并不是垂直居中，而是 偏上。
此时肉眼也可辨识出来，如果你更愿意相信数据的话，给你。
在这里插入图片描述
所以，要实现多行文本垂直居中，其css样式如下：

  div{
    width:200px;
    line-height:100px;
    border:1px solid lightskyblue;
    text-align:center;
  }
  p{
    line-height:20px;
    display:inline-block;
    vertical-align: middle;
    text-align:left;
  }

<body>
  <div>
    <p>这个世界随时都要崩塌 从前我太适应悲伤</p> 
  </div>
</body>

本文地址：https://blog.csdn.net/qzw752890913/article/details/107518476

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网