垂直對齊溢出圖像：隱藏div

我想在垂直內部對齊一個圖像與溢出設置爲隱藏，使容器具有相同的高度爲每個職位。我嘗試了很多其他的解決方案，但它不適用於溢出元素。任何人？這是我的CSS代碼至今：垂直對齊溢出圖像：隱藏div

.featured-image-blog{ 
    height: 220px; 
    width: 600px; 
    overflow: hidden; 
} 
.featured-image-blog img{ 
    height: auto;  
    width: 600px; 
}

和HTML：

<div class="featured-image-blog"> 
    <?php the_post_thumbnail('featured-image'); ?> 
</div>

提前感謝！

來源

2014-03-04 arvanderkamp

是宥能夠改變HTML？ – Pete

您的查詢是什麼？我仍然迷惑。 – Era

@Pete是的，沒問題 – arvanderkamp

垂直對齊一直是傳統的HTML和東西疼我建議你給DIV：

position: relative;

並給予IMG：

position: absolute; 
top: 50%; 
transform: translate(0, -50%); 
-webkit-transform: translate(0, -50%); 
-moz-transform: translate(0, -50%); 
-ms-transform: translate(0, -50%);

應該這樣做..

來源

2014-03-04 09:34:43

插圖小提琴http://jsfiddle.net/e7GWd/ –

謝謝穆罕默德，這個作品！但它也可以在較舊的IE瀏覽器中工作嗎？我想不是，對吧？ – arvanderkamp

是的..它適用於IE> = 9.對於舊版瀏覽器，您可以使用javascript和填充來修復它。或者使用table和td，因爲表格單元格支持vertical-align ..但我不推薦使用這個.. –

您是否嘗試過使用vertical-alignCSS屬性？

試試這個：

.featured-image-blog img{ 
    height: auto;  
    width: 600px; 
    vertical-align: middle; 
}

應當將其調整到父容器的中間。

來源

2014-03-04 09:37:33 Stewartside

是的，當然..但這是行不通的。 – arvanderkamp

垂直對齊溢出圖像：隱藏div

回答

相關問題