text-align基线对齐

### CSS 中 `text-align` 和基线对齐

在 CSS 中，`text-align` 属性用于控制文本内容的水平对齐方式，而并非直接处理基线对齐。对于基线对齐的操作主要由 `vertical-align` 属性完成。

#### 实现元素的基线对齐

为了实现元素之间的基线对齐，通常会使用 `vertical-align: baseline;` 这一属性值。当应用于行内元素或表格单元格内的元素时，它会使这些元素按照它们各自的基线进行对齐[^1]。

<style>
    .container {
        border: 1px solid black;
        font-size: 20px;
    }
    
    span.baseline-aligned {
        vertical-align: baseline;
    }

    /* 对比其他对齐方式 */
    span.top-aligned {
        vertical-align: top;
    }
</style>

<div class="container">
    <span class="baseline-aligned">这是一个基线对齐的文字。</span>
    <img src="example.png" alt="示例图像" style="height:30px;" />
</div>

<div class="container">
    <span class="top-aligned">这是顶部对齐的文字。</span>
    <img src="example.png" alt="示例图像" style="height:30px;" />
</div>

在这个例子中，第一个容器展示了如何通过设置 `vertical-align: baseline;` 来让文字和图片基于同一基线对齐；第二个容器则作为对比显示了不同对齐效果下的布局差异。

需要注意的是，在某些情况下，如果希望消除由于基线对齐造成的额外间距（比如图片下方可能出现的小间隙），可以通过调整 `vertical-align` 的值为除 `baseline` 外的其它选项来解决问题，如前所述的例子所示。