CSS 垂直对齐 span 元素在 div 中

在本文中，我们将介绍如何使用 CSS 来垂直对齐一个 span 元素在一个 div 容器中。垂直对齐是一个常见的布局需求，在处理文字和图像的排版时特别重要。我们将通过一些示例来说明如何实现。

阅读更多：CSS 教程

方法1：使用 display:flex 和 align-items:center

display:flex 是 CSS3 中引入的弹性盒子布局模型，它可以方便地实现水平和垂直的对齐。使用 align-items:center 属性可以使子元素在容器中垂直居中对齐。

<div class="container">
  <span>居中对齐</span>
</div>

<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  border: 1px solid black;
}
</style>

上述代码中的 .container 是一个带有 display:flex 属性的 div 容器，并设置了 align-items:center 属性。span 元素会在容器中垂直居中对齐。

方法2：使用 line-height 属性

line-height 属性可以用于设置元素的行高，将其设置为和容器相等的高度可以实现垂直居中对齐。

<div class="container">
  <span>居中对齐</span>
</div>

<style>
.container {
  height: 200px;
  line-height: 200px;
  border: 1px solid black;
}
</style>

上述代码中的 .container 设置了 line-height 属性为和容器的高度相等，span 元素会在容器中垂直居中对齐。

方法3：使用 position 和 transform 属性

可以通过设置 span 元素的 position 为 absolute，然后使用 transform 属性进行定位。

<div class="container">
  <span>居中对齐</span>
</div>

<style>
.container {
  position: relative;
  height: 200px;
  border: 1px solid black;
}

.container span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

上述代码中的 .container 设置了 position 属性为 relative，span 元素设置了 position 属性为 absolute，并通过 transform 属性将其垂直居中对齐。

方法4：使用 table 和 vertical-align 属性

可以使用 display:table 和 vertical-align:middle 属性来实现垂直居中对齐。

<div class="container">
  <span>居中对齐</span>
</div>

<style>
.container {
  display: table;
  height: 200px;
  border: 1px solid black;
}

.container span {
  display: table-cell;
  vertical-align: middle;
}
</style>

上述代码中的 .container 设置了 display:table 属性，span 元素设置了 display:table-cell 和 vertical-align:middle 属性，通过这些属性可以实现垂直居中对齐。

总结

本文介绍了四种常用的方法来实现在 div 容器中垂直对齐 span 元素的方式。这些方法分别使用了 display:flex 和 align-items:center 属性、line-height 属性、position 和 transform 属性以及 table 和 vertical-align 属性。在实际应用中，可以根据具体需求选择适合的方法来实现垂直对齐的效果。希望本文对你了解和运用 CSS 垂直对齐有所帮助。