行盒的垂直对齐 👌

1. 行内元素的垂直对齐基础

1.1 概念介绍

vertical-align 属性用于控制行盒元素（inline-box）或表格单元格（table-cell）元素在垂直方向上的对齐方式。这个属性只对行盒元素、行块盒元素和表格单元格元素生效。

1.2 对齐参考线

行盒中的对齐涉及多条参考线：

• 基线（baseline）：字母 x 的底部
• 中线（middle）：字母 x 的中间位置
• 顶线（text-top）：文本的顶部
• 底线（text-bottom）：文本的底部

2. vertical-align 属性详解

2.1 预设值

值	描述	应用场景
baseline	默认值，元素放置在父元素的基线上	普通文本对齐
sub	元素的基线与父元素的下标基线对齐	下标文本
super	元素的基线与父元素的上标基线对齐	上标文本
text-top	元素顶部与父元素字体的顶部对齐	与文本顶部对齐
text-bottom	元素底部与父元素字体的底部对齐	与文本底部对齐
middle	元素的中部与父元素基线加上 x-height 的一半对齐	图标与文本居中对齐
top	元素及其后代的顶部与整行的顶部对齐	与行的顶部对齐
bottom	元素及其后代的底部与整行的底部对齐	与行的底部对齐

2.2 数值和百分比

除了预设值外，vertical-align 还可以设置为：

• 具体长度值：如 10px、-5px 等，正值使元素相对于基线向上移动，负值则向下移动
• 百分比值：相对于元素自身 line-height 的百分比，如 25%

代码示例：

<style>
  .container {
    font-size: 16px;
    line-height: 30px;
    background-color: #f0f0f0;
    padding: 10px;
  }

  .baseline {
    vertical-align: baseline;
  }
  .sub {
    vertical-align: sub;
  }
  .super {
    vertical-align: super;
  }
  .text-top {
    vertical-align: text-top;
  }
  .text-bottom {
    vertical-align: text-bottom;
  }
  .middle {
    vertical-align: middle;
  }
  .top {
    vertical-align: top;
  }
  .bottom {
    vertical-align: bottom;
  }
  .px-10 {
    vertical-align: 10px;
  }
  .percent-50 {
    vertical-align: 50%;
  }

  span {
    display: inline-block;
    background-color: rgba(255, 0, 0, 0.2);
    padding: 0 5px;
  }
</style>

<div class="container">
  正常文本
  <span class="baseline">baseline</span>
  <span class="sub">sub</span>
  <span class="super">super</span>
  <span class="text-top">text-top</span>
  <span class="text-bottom">text-bottom</span>
  <span class="middle">middle</span>
  <span class="top">top</span>
  <span class="bottom">bottom</span>
  <span class="px-10">10px</span>
  <span class="percent-50">50%</span>
</div>

3. 常见问题与解决方案

3.1 图片底部白边问题

问题描述：

当图片放在块级元素中时，图片底部与父元素底边之间往往会出现一段空白间隙。这是因为图片默认是行内元素，其默认的垂直对齐方式是 baseline，而基线与底线之间存在一定的间距。

解决方法：

1. 设置图片为块级元素（推荐）

   img {
     display: block;
   }

2. 修改图片的垂直对齐方式

   img {
     vertical-align: bottom; /* 或 middle, top 等 */
   }

3. 设置父元素的字体大小为 0

   .img-container {
     font-size: 0;
   }

   注意：这种方法会导致容器内的文本不可见，需要单独为文本元素设置字体大小

3.2 行内元素与图标对齐

在使用图标字体或小图标时，常需要让它们与文本垂直居中对齐：

.icon {
  vertical-align: middle;
  /* 或根据具体情况微调 */
  vertical-align: -2px;
}

4. 实际应用场景

4.1 表单元素对齐

/* 使输入框与文本标签垂直居中对齐 */
input,
select,
textarea {
  vertical-align: middle;
}

4.2 图标与文本对齐

.icon {
  vertical-align: -0.125em; /* 微调以获得视觉上的居中效果 */
}

4.3 创建上标和下标

.superscript {
  vertical-align: super;
  font-size: smaller;
}

.subscript {
  vertical-align: sub;
  font-size: smaller;
}