我一直在努力弄清楚为什么这不起作用。我已经研究了很多,但似乎无法找到正确的答案:
我只是试图使一组DIV项目像一个垂直堆叠的双单元格表,其中表格显示内联,以便它可以跨越屏幕并像文本一样打破(为了响应外观)。顶部单元格和底部单元格是固定大小,每个内部的图像(一个艺术缩略图和一个手写标题)在其单元格内垂直和水平居中。这是我的代码:
CSS& HTML
div.artpluslabel {
width: 275px;
height: 375px;
position: relative;
display: inline-table;
}
div.artContainer {
width: 275px;
height: 325px;
text-align: center;
position: absolute;
display: table-cell;
vertical-align: middle;
}
div.label {
width: 275px;
height: 50px;
text-align: center;
position: absolute;
display: table-cell;
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>
&#13;
无论如何,忽略&#34;艺术&#34;图像的类,它唯一做的就是添加边框。
我不明白为什么这种情况不正确。这应该是一件基本的事情。发生的事情是标签部分与艺术图像重叠而不是在下面堆叠。
有人看到问题吗?我花了很长时间试图解决这个问题。
谢谢!
答案 0 :(得分: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因为它适合我。试试这个。