CSS-如何设置行内元素的垂直对齐方式，清除img标签底部空白缝隙，行高的设置

叁歲伎倆 2023-06-08 06:20 2阅读 0赞

`vertical-align` 用于设置行内元素的基线相对于该元素所在行的基线的垂直对齐（设置行内元素和行内块级元素的垂直对齐方式）

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>baseline</td> 
   <td>基线对齐，默认值</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>元素的顶端与行中最高元素的顶端对齐</td> 
  </tr> 
  <tr> 
   <td>middle</td> 
   <td>把此元素放置在父元素的中部</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>元素的顶端与行中最低的元素的顶端对齐</td> 
  </tr> 
 </tbody> 
</table>

默认基线对齐：

.box { 
      background: pink;
    }

<div class="box">
      <img src="./images/cat.jpg" alt="">
      <span>这是一段文本</span>
    </div>

![在这里插入图片描述][20191016215250399.png]  
文本顶端对齐：

.box span { 
    	vertical-align: top;
    }

![在这里插入图片描述][20191016215919652.png]  
想让文本相对于图片垂直居中对齐，将图片的垂直对齐方式设置为居中对齐即可：

.box img{ 
    	vertical-align: middle;
    }

通过设置 `vertical-align` 还可以解决图片下方空白缝隙的问题（只要属性值不是 `baseline` 即可）；还有另一种解决办法，直接将 img 元素转成块级元素：`display: block;`  
![在这里插入图片描述][20191017085732400.png]

`line-height` 用于设置行的高度，其属性值不允许为负值，所谓的行高就是两行文本基线之间的距离；属性值可以是数字、像素（px）、百分比（%）等；为 数字 时此数字会与当前的字体尺寸相乘来设置行间距；为 百分比 时基于当前字体尺寸的百分比设置行间距  
![在这里插入图片描述][20191017091712544.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
如果想要单行文本在元素中垂直居中对齐，将行高设置为元素的高即可

[20191016215250399.png]: /images/20230531/426e82183d1444f9b9a0b8019839544e.png
[20191016215919652.png]: /images/20230531/703cffc1e82d4b78abc14bdbc0408e7e.png
[20191017085732400.png]: /images/20230531/053d6777b81b4fde9a45e8262c7c7e28.png
[20191017091712544.png]: /images/20230531/29b293b9d5d24bff85b55f9e486bc6eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230531/677097d258c648d49ec89ead3f0b66bc.png