對齊居中的垂直和水平不規則縮略圖

Question

再次提出這個問題是因爲它被標記爲重複（它不是），我覺得它只是被埋沒了。請在將此標記爲另一個線程的另一個副本之前閱讀。

我想中心對齊一些不規則形狀的縮略圖到一個網格中，當瀏覽器窗口縮小時分成若干列。我非常接近這個代碼，但是我需要在每個圖像下面加上字幕。我找不到這個問題的答案。我認爲figcaption會起作用，但它會變得很奇怪。縮略圖的最大尺寸可能是200px^2。所有這些縮略圖保持其比例。

JS Fiddle Example

//CSS 
.centered { 
    width: 200px; 
    height: 200px; 
    padding: 20px; 
    border: 1px solid red; /* for testing only */ 
    display: flex; 
    justify-content: center; /* align horizontal */ 
    align-items: center; /* align vertical */ 
    float:left; 
} 

//HTML 
<div class="centered"> 
    <img src="http://placehold.it/200x150" alt="" /> 
</div> 

<div class="centered"> 
    <img src="http://placehold.it/150x200" alt="" /> 
    <figcaption>This text isn't working properly</figcaption> 
</div> 

<div class="centered"> 
    <img src="http://placehold.it/200x160" alt="" /> 
</div> 

<div class="centered"> 
    <img src="http://placehold.it/140x200" alt="" /> 
</div> 

<div class="centered"> 
    <img src="http://placehold.it/200x150" alt="" /> 
</div> 

Answer 1

基本上你需要在你的HTML改變。您應該在figure標記中採取image和figcaption。

.centered { 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 20px; 
 
    border: 1px solid red; /* for testing only */ 
 
    display: flex; 
 
    justify-content: center; /* align horizontal */ 
 
    align-items: center; /* align vertical */ 
 
    float:left; 
 
} 
 
figure{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
figure img{ 
 
\t display:block; 
 
\t margin: 0 auto; 
 
}

<div class="centered"> 
 
    <img src="http://placehold.it/200x150" alt="" /> 
 
</div> 
 

 
<div class="centered"> 
 
    <figure> 
 
    \t <img src="http://placehold.it/150x200" alt="" /> 
 
    \t <figcaption>This text isn't working properly</figcaption>  \t 
 
    </figure> 
 
</div> 
 

 
<div class="centered"> 
 
    <img src="http://placehold.it/200x160" alt="" /> 
 
</div> 
 

 
<div class="centered"> 
 
    <img src="http://placehold.it/140x200" alt="" /> 
 
</div> 
 

 
<div class="centered"> 
 
    <img src="http://placehold.it/200x150" alt="" /> 
 
</div>