css vertical-align

CSS的vertical-align属性用于设置元素的垂直对齐方式1。它适用于行内元素和置换元素(例如图像和表单输入框)，并且不继承2。以下是vertical-align属性的常用值及其描述3：

  1. baseline (默认值)：元素的基线与父元素文本的基线对齐2。

  2. top ：元素的顶端与行中最高元素的顶端对齐4。

  3. middle ：元素的垂直中心点和行框盒子基线往上1/2x-height处对齐2。

  4. bottom ：元素的顶端与行中最低元素的顶端对齐4。

  5. sub ：元素的基线位置在父元素的基线位置下方，用于下标。

  6. super ：元素的基线位置在父元素的基线位置上方，用于上标1。

  7. text-top ：把元素的顶端与父元素字体的顶端对齐。

  8. text-bottom ：把元素的底端与父元素字体的底端对齐4。

使用场景

vertical-align属性经常用于以下场景1：

  • 设置图片或表单元素(行内块元素)与文字的垂直对齐5。

  • 在表格中设置单元格内容的对齐方式。

  • 调整内联元素(如文本、图像)的垂直位置，使其与周围元素对齐4。

示例

以下是一些使用vertical-align属性的示例1：

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    font-size: 24px；
  }
  .align-top {
    vertical-align: top；
  }
  .align-middle {
    vertical-align: middle；
  }
  .align-bottom {
    vertical-align: bottom；
  }
  .align-baseline {
    vertical-align: baseline；
  }
</style>
</head>
<body>

<div class="container">
  <span class="align-top">Top</span>
  <span class="align-middle">Middle</span>
  <span class="align-bottom">Bottom</span>
  <span class="align-baseline">Baseline</span>
</div>

</body>
</html>

在这个示例中，不同的vertical-align值分别使文本垂直对齐到不同的位置4。

建议

  • 使用vertical-align时，确保元素是行内元素或行内块元素，否则该属性可能不会生效5。

  • 对于复杂的布局，可能需要结合其他CSS属性(如line-height、display等)来实现所需的垂直对齐效果。

Top
×
×