包含图像和标题的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，因为它适合我。尝试这个。