Question

我正在尝试以包括div容器，图像和标题在内的价格实现图块。问题在于图像的大小不同（并且不应调整大小），所以我无法使所有内容对齐

试图在图像（vertical-align）和标题（baseline）中添加top，但是在这种情况下，图块仍未对齐。这是示例： Tiles are not aligned

html：

<div class="container">
    <div class="tile-topup tile-blue">
        <img src="coin-1.png">
        <h4>1$</h4>
    </div>
    <div class="tile-topup tile-green">
        <img src="coin-2.png">
        <h4>2$</h4>
    </div>
    <div class="tile-topup tile-purple">
        <img src="coin-3.png">
        <h4>3$</h4>
    </div>
    <div class="tile-topup tile-red">
        <img src="coin-4.png">
        <h4>4$</h4>
    </div>
</div>

css：

.tile-topup {
    display: inline-block;
    width: 10em;
    height: 10em;
    padding: 1em;
    margin: 0.2em;
    text-align: center;
    background-color: #ccc;
}

图像，文本和图块应垂直对齐。有什么想法吗？

Answer 1

display: block;
margin-right: auto;
margin-left: auto;

将“显示：内联块”更改为“显示：块” 这样一来，每个图像都将在上一个图像的下一行开始。然后设置“ margin-left：auto”和“ margin-right：auto” 这样可以在框的两侧增加足够的边距以使图像居中。

Answer 2

将这些类用于平铺。 -d-flex -弹性柱 -align-items-center

这样做，img和h4在中心水平对齐。使用justify-content-center是否也要使其居中垂直对齐。此外，由于您使用display，因此需要删除tile-topup选择器的d-flex属性。如果您不想调整图像的大小，请同时删除height和width。

您也可以将d-flex用于container。

当图像的高度不同时，对齐图像标题，图像和图块

2 个答案: