包含圖像和標題的Div（圖片）

Question

我一直在努力弄清楚爲什麼這不起作用。我已經研究了很多，似乎找不到正確的答案：

我只是試圖使DIV項目集像一個垂直堆疊的雙單元格表格，其中表格內聯顯示，以便它可以跨越穿過屏幕並像文本一樣打破（用於響應外觀）。頂部單元格和底部單元格的大小是固定的，每個圖片（一個藝術圖片縮略圖和一個手寫字幕）在它們的單元格內垂直和水平居中。這裏是我的代碼：

CSS & HTML

div.artpluslabel { 
 
\t width: 275px; 
 
\t height: 375px; 
 
\t position: relative; 
 
\t display: inline-table; 
 
} 
 

 
div.artContainer { 
 
\t width: 275px; 
 
\t height: 325px; 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
} 
 

 
div.label { 
 
\t width: 275px; 
 
\t height: 50px; 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
}

<div class="artpluslabel"> 
 
    <div class="artContainer"> 
 
     <a href = "art.php?id=', $ids[$i], '"> 
 
      <img class = "art" src = "img/art/filename.gif"> 
 
     </a> 
 
    </div> 
 
    <div class="label"> 
 
     <a href = "art.php"> 
 
      <img src = "img/art_labels/filename.png"> 
 
     </a> 
 
    </div> 
 
</div>

無論如何，忽略圖像的 「藝術」 類，因爲它的唯一的事情就是添加邊框。

我不明白爲什麼這顯示不正確。這應該是一件基本的事情。會發生什麼情況是標籤部分與藝術圖像重疊，而不是在下面堆疊。

有人看到問題嗎？我花了一段時間試圖解決這個問題。

謝謝！

Answer 1

<div class="artpluslabel"> 
    <div class="artContainer"> 
     <a href = "art.php?id=', $ids[$i], '"> 
      <img class = "art" src = "img/art/filename.gif"> 
     </a> 
    </div> 
    <div class="label"> 
     <a href = "art.php"> 
      <img src = "img/art_labels/filename.png"> 
     </a> 
    </div> 
</div> 

CSS

.artpluslabel { 
    display: flex; 
    justiy-content: space-between; 
    flex-wrap: wrap; 
    width: 550px; 
} 

.artContainer, .label { 
    width: 50%; 
    height: 300px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

我不知道這件事。我一直使用flexbox，因爲它適合我。嘗試這個。