CSS - 在浮动 div 中垂直居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3655331/
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
CSS - vertically center an image within a floated div
提问by Hayden
I've decided to throw in the towel on this problem and need some help :). As per title trying to vertically align an image wrapped in an anchor element in the center of a floated fixed height div.
我决定放弃这个问题并需要一些帮助:)。根据标题，尝试垂直对齐包含在浮动固定高度 div 中心的锚元素中的图像。
Done a lot of googling for solutions and the closet I can get is below when the div is not floated (however it needs to be). Any ideas would be greatfully appreciated!
为解决方案进行了大量谷歌搜索，当 div 未浮动时（但它需要浮动），我可以获得的壁橱在下方。任何想法将不胜感激！
.class_name {
/*float: left*/
width:153px;
height:153px;
margin:3px;
padding:4px;
border:1px solid #dedede;
text-align: center;
vertical-align: middle;
background-color: #000;
display: table-cell;
}
<div class="class_name">
<a href=""><img src="image.jpg" alt="" /></a>
</div>
回答by Paul
Well, I bumped into the same issue last night (for a gallery-like type of thing), and managed to find a solution after stumbling onto this page. I'm happy to report this also seems to work for floated elements!
好吧，我昨晚遇到了同样的问题（对于类似画廊类型的事情），并在偶然发现此页面后设法找到了解决方案。我很高兴地报告这似乎也适用于浮动元素！
The trick is basically to give the outer element "display: table;", and the inner element (containing the img) "display: table-cell;".
诀窍基本上是给外部元素“display: table;”和内部元素（包含 img）“display: table-cell;”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<style type="text/css">
.class_name {
display: table;
float: left;
overflow: hidden;
width: 153px;
height: 153px;
}
.class_name a {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="class_name">
<a href=""><img src="image.jpg" alt="" /></a>
</div>
</body>
</html>
For IE8, you do need to be in standards mode. Some additional positioning is needed to get it to work in IE7:
对于 IE8，您确实需要处于标准模式。需要一些额外的定位才能让它在 IE7 中工作：
<!--[if lte IE 7]><style type="text/css">
.class_name {
position: relative;
}
.class_name a {
position: absolute;
top: 50%;
}
.class_name img {
position: relative;
top: -50%;
width: 100%;
}
</style><![endif]-->
回答by mattbasta
If the height is fixed and you know the size of the image, just position the image manually. Use position:absolute;top:25px;on the image or something like that, or add a margin to the image: margin:25px 0;.
如果高度是固定的并且您知道图像的大小，只需手动定位图像。position:absolute;top:25px;在图像上使用或类似的东西，或为图像添加边距：margin:25px 0;。
回答by Jamie
There is a cross browser css solution for this available here: http://www.vdotmedia.com/blog/vertically-center-content-with-css/
这里有一个跨浏览器 css 解决方案：http: //www.vdotmedia.com/blog/vertically-center-content-with-css/
