Выравнивание подписей, изображений и листов, когда изображения имеют разную высоту

Question

Я пытаюсь реализовать плитки для цен, включая контейнер, изображение и подпись. Проблема в том, что изображения имеют разный размер (и не должны быть изменены), поэтому я не могу выровнять все

Попытка добавить vertical-align к изображению (baseline) и заголовок (top), но плитки в этом случае все еще не выровнены. Вот пример: Плитка не выровнена

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

Используйте эти классы для пополнения тайла. - D-Flex - flex-column - align-items-center

При этом img и h4 выровнены по центру по горизонтали. используйте justify-content-center Если вы хотите выровнять их вертикально по центру тоже. Более того, вам нужно удалить свойство display селектора tile-topup, так как вы используете d-flex. Если вы не хотите изменять размер изображений, удалите height и width тоже.

---

Вы можете использовать d-flex и для container.

Answer 2

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

Изменить 'display: inline-block' на 'display: block' Это сделает так, чтобы каждое изображение начиналось с новой строки под предыдущим. Затем установите 'margin-left: auto' и 'margin-right: auto' Это добавляет достаточно полей с обеих сторон полей для центрирования ваших изображений.