如何垂直對齊此圖像？

-1

我有這個網站，我似乎無法垂直對齊列表上的圖像。 http://www.ruweplus.ro/echipamente-hidromasaj 如何垂直對齊此圖像？

我試過，但它並沒有垂直對齊我的形象：

.image_wrapper img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
}

另外，我用父相同的代碼。

來源

2015-10-05 Ionut

嗨，發生了什麼？我的解決方案不再工作了？我看到你也刪除了你的評論。 –

是的，我刪除了評論，因爲它不再正確。你的答案不是解決方案。我認爲它有效，但我有一個標籤沒有封好，爲什麼它看起來第一次工作，但它沒有。我自己解決了它。我嘗試了別的東西。 – Ionut

大聲笑很高興你明白了。但讓我告訴你我的解決方案工作得很好。下次在這裏問問題之前仔細檢查你的代碼！我們不想浪費時間爲您的小錯誤尋找解決方案。 –

我建議你用一個div包裝你的形象，給它一個類名，在這裏我給「測試」。

.test::before { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100% 
} 
.test img{ 
    display: inline-block; 
    vertical-align: middle; 
}

此外，您的下一課「image_wrapper」（包括「test」類）的每個元素都必須具有100％的高度。

來源

2015-10-05 11:51:50

「舊」CSS < = 2中的垂直對齊非常困難。我建議你改用CSS3 flexboxes。請注意，這隻適用於新的瀏覽器。

它的要點是非常簡單的：

.image_wrapper { 
    display: flex; 
    align-items: center; 
}

JSFiddle

順便說一句，this是一個很好的資源，讓你開始與flexboxes，

來源

2015-10-05 10:58:33

添加這個CSS

.image_wrapper { 
    display: flex; 
    align-items: center; 
}

並刪除此Css

.image_frame .image_wrapper .mask, .edd_download_image:after { 
    /* -webkit-box-shadow: inset 0 0 5px 2px rgba(0,0,0,.07); */ 
    /* box-shadow: inset 0 0 5px 2px rgba(0,0,0,.07); */ 
}

它會正常工作，我認爲

來源

2015-10-05 11:21:36

另外，不是一個好的解決方案。 – Ionut

，如果您還需要爲舊版瀏覽器的解決方案，你最好使用display:table-cell方法。你可能需要一個包裝元素display:table。

的方法進行了詳細那邊descripted：https://css-tricks.com/centering-in-the-unknown/（章節：「哈德：未知子」）

或短那邊： http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

來源

2015-10-05 11:38:16 grilly

如何垂直對齊此圖像？

回答

相關問題