CSS 垂直对齐中间与显示表格单元格不适用于图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20584777/
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
Vertical-align middle with display table-cell not working on images
提问by Elaine Marley
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
我试图在布局上使用 vertical-align: middle 来垂直居中，有时是文本，有时是图像，但它只适用于文本。谁能告诉我为什么？
HTML:
HTML：
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
CSS：
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/I created a fiddle aswell
http://jsfiddle.net/9uD8M/我也创建了一个小提琴
回答by nice ass
Put border: 1px solid blackon your img, spantags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
放上border: 1px solid black你的img, span标签，然后在浏览器开发中检查这两个元素。安慰。您会注意到跨度默认为其父级的 100% 高度，而图像具有定义的高度（实际图像的高度）。
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
因此，您并不是真正将这些元素相对于 div 垂直对齐，您只是将 span 元素内的文本相对于 span 垂直对齐:)
If you really want to use tables for vertical-centering, here's the correct code: http://jsfiddle.net/WXLsY/
如果你真的想使用表格进行垂直居中，这里是正确的代码：http: //jsfiddle.net/WXLsY/
(vertical-alignand display:table-cellgo on the parent, and you need wrapper table on them)
（vertical-align并display:table-cell继续使用父级，并且您需要在它们上使用包装表）
But there are other ways to do this (SO has many answers to this question, just use search)
但是还有其他方法可以做到这一点（所以这个问题有很多答案，只需使用搜索）
回答by Marc Audet
Here is one way of fixing the problem:
这是解决问题的一种方法：
HTML:
HTML：
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your imgin a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
放入imga span，图像是替换元素，它不能包含子内容，因此，vertical-align 不起作用。
CSS:
CSS：
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
见演示：http: //jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cellto the parent divelement, but that would be a different approach.
有几种方法可以做到这一点，您也可以应用于display: table-cell父div元素，但这将是一种不同的方法。
回答by Gregg Od
In order to vertically align an image inside a table cell you need to give the image a display of block.
为了在表格单元格内垂直对齐图像，您需要为图像显示块。
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
margin: 0 auto 是将图像对齐到中心。如果您希望图像左对齐，则不要包含此内容。如果您希望图像右对齐，您可以添加：
float: right
Thanks, G
谢谢，G
回答by dpuertas
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
您可以尝试添加 -> line-height: 200px; 在跨度样式部分，我认为它可能有效；
