我决定扔在毛巾上这个问题,需要一些帮助:).按照标题,试图垂直对齐包裹在浮动固定高度div中心的锚点元素中的图像.
做了很多搜索的解决方案,我可以得到的壁橱下面,当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>
解决方法
那么昨天晚上我遇到了同样的问题(像一个类似画廊的东西),并设法找到一个解决方案,绊倒在
this page.我很高兴地报告这似乎也适用于浮动元素！
诀窍基本上是给外部元素“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]-->
