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

Question

我在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来做到这一点？

OBS.我所指的div的父div有位置:相对所以还有另一个问题.

Answer 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来演示(编辑小提琴,以显示所有内容在一个容器内垂直对齐.)

编辑:为了获得你想要的行为,我建议使用额外的显示属性 - 容器表和包含元素的表格单元格.小提琴链接已随更改而更新.

编辑:我能想到让它工作的唯一方法是将图像包装在另一个内联容器中,在这种情况下是一个跨度.我已经更新了小提琴来演示.