我目前正在做一個網站的投資組合部分的重新設計，並且想法是爲每個客戶端有一個代表性的圖像作爲鏈接塊的背景，當你將鼠標懸停在圖像上，一個半透明的覆蓋圖，其中包含一些簡短的文字摘要。可以單擊此區塊以將用戶引導至描述客戶端及其工作更詳細的單獨頁面。投資組合部分採用柔性箱顯示，以提高響應速度。垂直居中圖像在flexbox圖元

這裏是我有什麼刪節：https://jsfiddle.net/ddw2m9ea/

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: Open Sans; 
} 
.row { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 
} 
figure { 
    overflow: hidden; 
    flex: 1 0 0px; 
    position: relative; 
    margin: 0; 
    height:240px; 
} 
figure > img { 
    width:100%; 
} 
a > img { 
    max-width: 100%; 
    vertical-align: middle; 
}

我已經試過應用vertical-align: middle;到有沒有效果，目前你看到的圖像繼續流動的幾件事越來越低，越來越大，容器越來越大。我需要一種能夠在不改變尺寸的情況下垂直放置圖像的解決方案。

來源

2015-02-24 user242007

vertical-align: middle如果將某些東西設置爲display: inline-block;，但沒有任何塊級別元素，則適用。該垂直對齊只會影響文本流中的項目（將其作爲inline-block來完成）。

然而，你可以做這樣的事情：

figure > img { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

這將始終保持你的形象在figure的中心，因爲你已經設置的position到relative在figure。

Example Fiddle

來源

2015-02-24 21:04:58

謝謝，這解決了我的問題就好！ – user242007 2015-02-24 21:25:17

這是一個重複的問題，但看到以下內容：

Flexbox: center horizontally and vertically

對於Flexbox的，你有不同的CSS元素，例如align-items和justify-content

，你會用它來實現自己的目標。

來源

2015-02-24 21:03:37 badfilms

這將適用於彎曲項目，但不適用於他們的子女。 – 2015-02-24 21:05:24

您可以在圖增加line-height屬性，因爲你已經設置元素的高度。所以你把它添加到你的CSS figure {line-height：240px}。希望這可以幫助。

來源

2015-02-24 21:05:42 chixieburr

如果元素處於文本流中，則行高將起作用，而當前不是。你需要給它一個「inline」或「inline-block」的顯示來達到這個目的。白色空間也可能成爲一個問題。 – 2015-02-24 21:06:26

垂直居中圖像在flexbox圖元

回答

Example Fiddle

相關問題