欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 21:45:37
替换元素与非替换元素
hello
world 路飞div,span,img{ width:100px; height:100px; background-color:lightskyblue; margin:10px;}块级元素可以设置width...

替换元素与非替换元素

<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;
}

【css】利用line-height实现垂直居中
块级元素可以设置widthheight
有的内联元素设置widthheight后,无效,如span;
有的内联元素设置widthheight后,有效,如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>

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

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

【css】利用line-height实现垂直居中
将空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>

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

行距/半行距

  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>

【css】利用line-height实现垂直居中
行距 = 行高 - 字体大小。
半行距 = 行距 / 2。
借助 行距的上下等分机制,可以使用 行高 实现 单行文本的垂直居中。

单行文本垂直居中

  div{
    width:200px;
    line-height:100px;
    border:1px solid lightskyblue;
    text-align:center;
  }
<body>
  <div>这个世界随时都要崩塌</div>
</body>

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

多行文本垂直居中

先看个例子。

<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;
  }

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

【css】利用line-height实现垂直居中
如果没有p的vertical-align:middle,此时 多行文本并不是垂直居中,而是 偏上。
此时肉眼也可辨识出来,如果你更愿意相信数据的话,给你。
【css】利用line-height实现垂直居中
所以,要实现多行文本垂直居中,其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

相关标签: css