CSS属性vertical-align_vertical-align length-优快云博客

vertical-align属性用于设置行内元素或表格单元格的垂直对齐方式，包括baseline、sub、super、text-top、text-bottom、middle等关键字及长度、百分比值。它可以调整元素相对于其父元素或行的对齐位置，如文字与图片的对齐、表格单元格内容的对齐等。

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

vertical-align 只对行内元素、行内块元素和表格单元格元素生效

/* 关键字 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* 长度数值 */
vertical-align: 10em;
vertical-align: 4px;

/* 百分比 */
vertical-align: 20%;

/* 全局 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

vertical-align 属性可被用于两种环境：

使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片<img>
垂直对齐表格单元内容。

行内元素的值

这些值使元素相对其父元素垂直对齐

baseline - 使元素的基线与父元素的基线对齐
sub - 使元素的基线与父元素的下标基线对齐
super - 使元素的基线与父元素的上标基线对齐
text-top - 使元素的顶部与父元素的字体顶部对齐
text-bottom - 使元素的底部与父元素的字体底部对齐
middle - 使元素的中部与父元素的基线加上父元素 x-height的一半对齐
length - 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数
percentage - 使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比，可以是负数

相对行的值

top - 使元素及其后代元素的顶部与整行的顶部对齐
bottom - 使元素及其后代元素的底部与整行的底部对齐

表格元素的值

baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)使单元格的基线，与该行中所有以基线对齐的其他单元格的基线对齐
top 使单元格内边距的上边缘与该行顶部对齐
middle 使单元格内边距盒模型在该行内居中对齐
bottom 使单元格内边距的下边缘与该行底部对齐

例子

1、默认值vertical-align:baseline;

<style>
    .box {
        width: 500px;
        height: 100px;
        line-height: 100px;
        background-color: aquamarine;
        font-size: 40px;
    }
    span {
        vertical-align:baseline; // 默认值为baseline
    }
</style>

<div class="box">
  国国
  <span>国国</span>
  <img src="./图库/AI.jpg" alt="" width="60px">
  <span>国国</span>
</div>

此时，图片跟文字的基线对齐。

2、vertical-align:text-bottom;

    <style>
      .box {
        width: 500px;
        height: 200px;
        line-height: 200px;
        background-color: aquamarine;
        font-size: 40px;
      }
      img {
        vertical-align: text-bottom;
      }
    </style>

<div class="box">
  国国
  <span>国国j</span>
  <img src="./图库/AI.jpg" alt="" width="60px">
  <span>国国</span>
</div>

图片跟文字的底部对齐

3、vertical-align:bottom;

      img {
        vertical-align: bottom;
      }

图片跟整行的底部对齐

4、vertical-align: middle;