Question

我一直在努力弄清楚为什么这不起作用。我已经研究了很多，但似乎无法找到正确的答案：

我只是试图使一组DIV项目像一个垂直堆叠的双单元格表，其中表格显示内联，以便它可以跨越屏幕并像文本一样打破（为了响应外观）。顶部单元格和底部单元格是固定大小，每个内部的图像（一个艺术缩略图和一个手写标题）在其单元格内垂直和水平居中。这是我的代码：

CSS＆amp; HTML

＆＃13;

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;
}

＆＃13;

<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;图像的类，它唯一做的就是添加边框。

我不明白为什么这种情况不正确。这应该是一件基本的事情。发生的事情是标签部分与艺术图像重叠而不是在下面堆叠。

有人看到问题吗？我花了很长时间试图解决这个问题。

谢谢！

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因为它适合我。试试这个。

用于包含图像和标题的Div（作为图像）

1 个答案: