我决定放弃这个问题并需要一些帮助:)。根据标题，尝试垂直对齐包含在 float 固定高度 div 中心的 anchor 元素中的图像。
为解决方案进行了大量谷歌搜索，当 div 未 float 时(但它需要 float )，我可以获得的壁橱在下方。任何想法将不胜感激!
.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>
最佳答案
好吧，我昨晚遇到了同样的问题(对于类似画廊类型的事情)，并在绊倒 this page 后设法找到了解决方案。我很高兴地报告这似乎也适用于 float 元素!
诀窍基本上是给外部元素“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>
对于 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]-->
关于CSS - 在 float div 中垂直居中图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3655331/