32

我在 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 所以还有另一个问题。

4

2 回答 2

44

为图像和文本都设置一个垂直对齐：中间 - 文本需要包含在一个也是 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 链接已随更改更新。

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

于 2012-11-16T00:10:20.060 回答
4

你可以试试这个，这里的例子。

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;
}

​</p>

​HTML：

<div class="parent">
    <div class="img"><img src="http://example.com.img1.png" /></div>
    <div class="text">Some Text Some.</div>
</div>
于 2012-11-16T01:01:06.527 回答