CSS - 垂直居中浮动div内的图像

我决定抛出这个问题，需要一些帮助:)。按照标题试图垂直对齐包含在浮动固定高度div中心的锚点元素中的图像。CSS - 垂直居中浮动div内的图像

做了很多google搜索解决方案和我可以得到的壁橱当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>

来源

2010-09-07 Hayden

其他任何人有什么想法？ – Hayden 2010-09-07 08:16:12

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

来源

2010-09-07 02:30:24 mattbasta

不幸的是，图像有时可能会有不同的高度。虽然谢谢！ – Hayden 2010-09-07 03:28:19

有这个可以在这里找到一个跨浏览器CSS的解决方案：http://www.vdotmedia.com/blog/vertically-center-content-with-css/

来源

2010-09-07 02:44:52 Jamie

啊，是的，我碰到过这个。尽管这个问题仍然存在，但当它浮动时非常令人沮丧！ – Hayden 2010-09-07 03:30:49

嗯，我碰到了同样的问题，昨晚（对事情画廊样型），并设法找到跌跌撞撞后的解决方案到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]-->

来源

2010-10-14 10:23:25 Paul

整齐。不知道这是不是最好的方式，但工程很好http://www.jsfiddle.net/NgqE2/ – Shikiryu 2010-10-14 10:36:12

@Shikiryu谢谢！它终于为我工作了！ – jibiel 2011-08-17 09:54:21

请记住将图像放在其他标签内。在这种情况下，它是''。否则它将无法工作。 – Ciwan 2015-09-15 13:25:19

CSS - 垂直居中浮动div内的图像

回答

相关问题