如何使用CSS在DIV中垂直对齐图像和文本？

一尘不染

如何使用CSS在DIV中垂直对齐图像和文本？

css

我在div内有一个图像和一些文本，我想使用CSS将图像和文本放在div的垂直中心。问题是我不知道会有多少行文本，但是文本和图像必须始终在中间。例如，当只有一行文本时，div应该如下所示：

####################################
#  _______                         #
# |       |                        #
# |       |                        #
# | IMAGE |    text text text      #
# |       |                        #
# |_______|                        #
#                                  #
####################################

如果最终我有更多行或文本的高度大于图像的高度，则图像应对齐，如下所示：

####################################
#                                  #
#              text text text      #
#  _______     text text text      #
# |       |    text text text      #
# |       |    text text text      #
# | IMAGE |    text text text      #
# |       |    text text text      #
# |_______|    text text text      #
#              text text text      #
#              text text text      #
#                                  #
####################################

我很难获得这种效果，没有使用javascript可以做到这一点吗？

观察我指的div的父div具有position：relative，所以还有另一个问题。

阅读 309

2020-05-16

共1个答案

一尘不染

给图像和文本一个vertical-align：middle-文本需要包含在一个元素中，该元素还要显示：inline。因此标记如下：

<div>
  <span><img src="blah.jpg" /></span>
  <span>text text text</span>
</div>

div {
  display: table;
}

img {
  vertical-align: middle;
  display: table-cell;
}
span {
  vertical-align: middle;
  display: table-cell;
}

应该管用。这是一个演示的jsfiddle（经过编辑的小提琴也显示了容器内的所有垂直对齐）。

编辑：要获得所需的行为，我建议使用其他显示属性-容器的表和包含元素的表单元格。Fiddle链接已更新，其中包含更改。

编辑：我唯一想到的使其工作的方法是将图像包装在另一个内联容器中，在这种情况下为跨度。我已经更新了小提琴以进行演示。

2020-05-16