CSS - 如何在浮动的 div 中垂直居中一张图片

Question

CSS - 如何在浮动的 div 中垂直居中一张图片

14

我已经决定放弃解决这个问题，需要一些帮助：）。根据标题，在浮动的固定高度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>

- Hayden

3个回答

0

如果高度固定且您知道图像的大小，只需手动定位图像。在图像上使用position:absolute;top:25px;或类似的东西，或者为图像添加边距：margin:25px 0;。

- mattbasta

不幸的是，图像有时可能具有不同的高度。谢谢！ - Hayden

0

有一种适用于跨浏览器的CSS解决方案在这里可以获得：http://www.vdotmedia.com/blog/vertically-center-content-with-css/

- Jamie

啊，是的，我遇到过这个问题。但是当它被浮动时仍然存在同样的问题，这非常令人沮丧！ - Hayden

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul · Accepted Answer

昨晚我遇到了同样的问题（类似相册），在偶然间发现了这个页面后，成功找到解决方法。我很高兴地报告说，这种方法也适用于浮动元素！

诀窍基本上是给外部元素添加"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]-->