CSS img 文字垂直居中

在本文中，我们将介绍如何使用CSS实现图片和文字的垂直居中对齐。

阅读更多：CSS 教程

使用flexbox布局

flexbox是一种强大的CSS布局方式，它可以使HTML元素在容器内基于任何方向和轴线（包括垂直）进行对齐。使用flexbox布局，可以简单地实现图片和文字的垂直居中。

示例代码如下：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container img {
  margin-bottom: 10px;
}

在上面的示例中，我们使用了flexbox布局，设置容器的flex-direction为column，使子元素按照列方向排列。然后，使用align-items和justify-content属性将子元素在垂直和水平方向上居中。

使用vertical-align属性

vertical-align属性是一种与文本和图像相关的属性，它可以控制行内元素和表格单元格中的垂直对齐方式。使用vertical-align属性，也可以简单地实现图片和文字的垂直居中。

示例代码如下：

.container {
  display: inline-block;
  height: 200px;
  line-height: 200px;
}

.container img, .container span {
  display: inline-block;
  vertical-align: middle;
}

在上面的示例中，我们使用了inline-block属性设置容器的宽度和高度。然后，使用line-height属性设置文本的行高，使文本垂直居中。最后，使用vertical-align属性将图片和文字在垂直方向上居中。

使用position属性

position属性是一种用于定位元素的属性，它可以使HTML元素在文档中相对于其他元素进行定位。使用position属性，也可以实现图片和文字的垂直居中。

示例代码如下：

.container {
  position: relative;
  height: 200px;
}

.container img, .container span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

在上面的示例中，我们使用了position属性设置容器和子元素的定位方式。然后，使用top属性将图片和文字的上边缘移到容器的中心位置。最后，使用transform属性和translateY函数使图片和文字在垂直方向上居中。