css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

下面是关于"CSS 垂直对齐"的完整攻略：

什么是CSS垂直对齐？

在CSS中，我们不仅可以定义元素在水平方向上的对齐方式，还可以定义在垂直方向上的对齐方式。CSS中垂直对齐的属性是vertical-align。该属性可以用于行内元素、表格单元格等元素。

如何使用vertical-align属性？

在使用vertical-align属性时，需要注意以下几个点：

• vertical-align属性只适用于行内元素和表格单元格元素，对于块级元素无效。
• vertical-align属性的值可以是基线（baseline）、文本底部（bottom）、文本顶部（top）、中央（middle）等。
• vertical-align属性的值不同于text-align属性的值，其并没有left、center、right等值。

以下是一些具体的实例：

实例一：基线对齐

在HTML文档中添加以下标签：

<p style="font-size: 24px;">
  基线对齐：<span style="vertical-align: baseline;">baseline</span>
</p>
<p style="font-size: 24px;">
  基线对齐：<img src="https://picsum.photos/id/1041/200/300" style="vertical-align: baseline;" />
</p>

效果如下：

基线对齐：baseline

基线对齐：

可以看到，在这个例子中，基线对齐是指让文本的基线和图片的基线对齐，因此这里的两个元素都采用了vertical-align: baseline;样式。

实例二：中央对齐

在HTML文档中添加以下标签：

<p style="font-size: 24px;">
  中央对齐：<span style="vertical-align: middle;">middle</span>
</p>
<p style="font-size: 24px;">
  中央对齐：<img src="https://picsum.photos/id/1041/200/300" style="vertical-align: middle;" />
</p>

效果如下：

中央对齐：middle

中央对齐：

在这个例子中，中央对齐是指让文本和图片都居中对齐，因此这里的两个元素都采用了vertical-align: middle;样式。

总结

CSS中的垂直对齐是通过vertical-align属性来实现的。我们可以使用它来对行内元素和表格单元格进行垂直对齐。需要注意的是，vertical-align属性的值和text-align属性的值不同，不能互相混淆。