HTML | DOM 样式 verticalAlign 属性

简介

在 HTML | DOM 中，verticalAlign 属性用于设置元素的垂直对齐方式。该属性影响行内元素或表格单元格的垂直对齐方式。

语法

vertical-align: value;

值

vertical-align 属性可以接受以下值：

• baseline：默认值。元素的基线与父元素的基线对齐。
• sub：垂直对齐到基线下的下标位置。
• super：垂直对齐到基线上的上标位置。
• top：向上对齐到最高元素的顶部。
• text-top：对齐到父元素字体的顶部。
• middle：垂直居中对齐。
• bottom：向下对齐到最底部元素的底部。
• text-bottom：对齐到父元素字体的底部。
• ：相对于行高的百分比值。
• ：使用具体的长度值，如像素（px）。

示例

下面的示例展示了如何使用 vertical-align 属性来设置元素的垂直对齐方式：

<p>
  <span style="vertical-align: baseline;">Baseline</span>
  <span style="vertical-align: sub;">Sub</span>
  <span style="vertical-align: super;">Super</span>
  <span style="vertical-align: top;">Top</span>
  <span style="vertical-align: text-top;">Text-Top</span>
  <span style="vertical-align: middle;">Middle</span>
  <span style="vertical-align: bottom;">Bottom</span>
  <span style="vertical-align: text-bottom;">Text-Bottom</span>
  <span style="vertical-align: 25%;">Percentage</span>
  <span style="vertical-align: 50px;">Length</span>
</p>

在上述示例中，我们创建了一个段落（p）元素，并在该段落中添加了多个行内元素（span）。每个行内元素都使用不同的 vertical-align 值来进行垂直对齐。你可以尝试在浏览器中运行上述示例，以查看不同对齐方式的效果。

注意事项

• vertical-align 属性只对行内元素或表格单元格有效。
• vertical-align 属性不会对块级元素产生作用。
• vertical-align 属性在不同浏览器中可能有一些微小的差异，请在实际使用中做兼容性测试。

以上就是关于 HTML | DOM 样式 verticalAlign 属性的介绍。希望对你理解和使用该属性有所帮助！