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

Question

我有一个包含图片和文字的div，我想使用CSS将图片和文字垂直居中。问题是我不知道会有多少行文字，但是无论如何，文字和图片都必须始终处于中间位置。例如，当只有一行文字时，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属性，因此还存在另一个问题。

- Cainã

Answer 1

给图像和文本都设置 vertical-align: middle - 文本需要包含在一个也是 display: 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以显示所有内容在容器内垂直对齐）。

编辑：要获得所需的行为，我建议使用其他显示属性 - 用于容器的table，用于包含元素的table-cell。已更新fiddle链接进行更改。

编辑：我能想到的唯一方法是将图像包装在另一个内联容器中，在这种情况下是span。我已更新fiddle进行演示。

- kinakuta

---

是的，最好使用span标签，这样您就不必向文本容器添加任何显示属性。 - kinakuta

我在我的代码和fiddle中尝试过，它可以处理一行文本，但无法处理多行文本。 - Cainã

啊，好的，我会更新这个fiddle并进行一些修改以实现我认为你想要的效果。 - kinakuta

@RedCurley又更新了fiddle，但我不得不修改标记才能让它正常工作。http://jsfiddle.net/kq9G8/8/ - kinakuta

我在互联网上搜索这个问题已经两年了。谢谢@kinakuta。 - Abdalla Arbab

Answer 2

你可以尝试这个示例。

CSS:

div.parent{ 
    border:solid black 1px;
    display:table;
    padding:5px; 
    width:100%;
    margin:5px 0; /* you can change/remove margin */
}
div.text{ 
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
}
div.parent .img{
    vertical-align:middle;
    display:table-cell;
    padding-right:5px;
    width:50px; /* you can change width */
}
div.img img{ 
    width:100%;
    height:50px; /* you can change height */
    vertical-align:middle;
}

​

​HTML:

<div class="parent">
    <div class="img"><img src="http://example.com.img1.png" /></div>
    <div class="text">Some Text Some.</div>
</div>

- The Alpha