Html 如何使用 CSS 在 DIV 中垂直对齐图像和文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13408394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align both image and text in a DIV using CSS?
提问by Cain?
I have an image and some text inside a div and I'd like to put the image and the text in the vertical center of the div using CSS. The problem is that I don't know how many lines of text I will have but the text and the image must be ALWAYS in the middle. For example, when there's only one line of text the div should look like this:
我在 div 中有一个图像和一些文本，我想使用 CSS 将图像和文本放在 div 的垂直中心。问题是我不知道我会有多少行文本，但文本和图像必须始终在中间。例如，当只有一行文本时，div 应如下所示：
####################################
# _______ #
# | | #
# | | #
# | IMAGE | text text text #
# | | #
# |_______| #
# #
####################################
If eventually I have more lines or the height of text is larger than the height of the image then the image should be aligned, just like this:
如果最终我有更多的行或者文本的高度大于图像的高度，那么图像应该对齐，就像这样：
####################################
# #
# 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 #
# #
####################################
I'm in trouble to get this effect, is there any way without using javascript to do this?
我很难获得这种效果，有没有办法不使用 javascript 来做到这一点？
Obs. The parent div of the div I'm referring to have position:relative so there's another problem.
观察。我所指的 div 的父 div 有 position:relative 所以还有另一个问题。
回答by kinakuta
Give both the image and the text a vertical-align: middle - the text needs to be contained in an element that is also display: inline. So markup like this:
给图像和文本一个垂直对齐：中间 - 文本需要包含在一个元素中，该元素也显示：内联。所以标记如下：
<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;
}
should work. Here's a jsfiddleto demonstrate (edited fiddle to show everything is vertically aligned within a container as well.)
应该管用。这是一个jsfiddle来演示（编辑小提琴以显示所有内容也在容器内垂直对齐。）
EDIT: to get the behavior you want, I recommend using additional display properties - table for the container and table-cell for the contained elements. Fiddle link has been updated with the changes.
编辑：为了获得你想要的行为，我建议使用额外的显示属性 - 容器的表格和包含元素的表格单元。Fiddle 链接已更新。
EDIT: the only way I could think of to get it to work was to wrap the image in another inline container, in this case a span. I've updated the fiddle to demonstrate.
编辑：我能想到的让它工作的唯一方法是将图像包装在另一个内联容器中，在这种情况下是一个跨度。我已经更新了小提琴来演示。
回答by The Alpha
You may try this, example here.
你可以试试这个，这里的例子。
CSS:
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:
?HTML：
<div class="parent">
<div class="img"><img src="http://example.com.img1.png" /></div>
<div class="text">Some Text Some.</div>
</div>
