【关于line-height为什么会让文字居中对齐的思考】

鸿心

已于 2022-10-09 10:09:25 修改

阅读量282

点赞数 1

文章标签： css css3 前端

于 2022-09-29 10:33:57 首次发布

原文链接：https://m.php.cn/article/479817.html

版权

潘多拉魔盒，一旦开启一点，就会发现怎么要学习有那么多！

必须要知道的一些概念

1. 基线、底线、顶线、中线

基线、底线、顶线、中线
注：基线（base line）不是汉字的下端沿，而是英文字母的下沿端【回忆下英文字帖的三线】

2. 内容区

内容区

内容区是顶线和底线包裹的区域
行内元素可以通过background-color属性来显示出来
大小由font-size 和文字数量决定

3. 行距、行高

行高、行距

行高：一行文字的高度，也可以理解为相邻文本基线间的距离
行距：相邻文本，上文本的基线和下文本的顶线的距离

详解vertical-align这属性

有两种使用场景

行内元素（inline）
表格单元格（table-cell）元素

作用

设置元素的垂直方向的对齐方式【行内元素专属，必须给行内元素设置的属性】

继承性

不继承
属性的继承性十分重要！例如：box-sizing 这个属性就是不可继承的

属性值

baseline：基线对齐(默认)

  <!--
 	img和span一样是个行内样式
 	我们看这个图片和文字在一块展示时，它的对齐方式
	-->
  <div>
  An <img class="top" src="./img/panda.png" alt="link" width="32"height="32" />image with a text-top alignment.
 </div>

baseline
2. sub : 下标对齐和super:上标对齐

什么是下标和下标
元素的基线会相对于原基线降低或上升，具体降低或上升多少由浏览器来决定
vertical-align:sub 降低
vertical-align:super 升高

    <div>An <img style="vertical-align:sub"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a sub alignment.</div>
    <br>  
    <div>An <img style="vertical-align:super"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a super alignment.</div>
    <br>

sub和super
3. top:顶端对齐和bottom:底端对齐

外部容器的的顶端和底端

<style>
    div{
      width:auto;
      height:50px;
      line-height: 50px;
      border: 1px solid red;
    }
</style>
    <div>An <img style="vertical-align:top"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a top alignment.</div>
    <br>  
    <div>An <img style="vertical-align:bottom"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a bottom alignment.</div>
    <br>

top和bottom
4. text-top：文字顶线和 text-bottom:文字底线

<style>
    div{
      width:auto;
      height:50px;
      line-height: 50px;
      border: 1px solid red;
    }
</style>
    <div>An <img style="vertical-align:text-top"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a text-top alignment.</div>
    <br>  
    <div>An <img style="vertical-align:text-bottom"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a text-bottom alignment.</div>
    <br>

text-top和text-bottom
5. middle: 中部对齐

个人理解：该行内元素的中线和外部容器的中线重合

<style>
    div{
      width:auto;
      height:50px;
      line-height: 50px;
      border: 1px solid red;
    }
</style>
    <div>An <img style="vertical-align:middle"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a middle alignment.</div>
    <br>

middle
6. 百分比和数值

和上标下标一样，不同的是，上标下标是浏览器来决定调整基线的降低或上升高度
这里我们可以控制基线的上下移动的幅度
百分比和基于line-height来计算的

<style>
    div{
      width:auto;
      height:50px;
      line-height: 50px;
      border: 1px solid red;
    }
</style>
    <div>An <img style="vertical-align:5px"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a 5px alignment.</div>
    <br>
    <div>An <img style="vertical-align:-5px"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a -5px alignment.</div>
    <br>
    <div>An <img style="vertical-align:10%"  src="./img/panda.png" alt="link" width="32" height="32" /> image
      with a 10% alignment.</div>
    <br>