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內的圖像

回答

相關問題