Выровнять текст по нижнему краю и по центру в div

Question

Я использую следующие строки в файле HTML с определениями классов из bootstrap

<div class="row no-gutters justify-content-center" align="bottom">
            <div class="col-2"></div>
            <div class="col-1 bg-white text-black" align="center">aaaaaaaaaaa</div>
            <div class="col-1 bg-white text-black" align="center">bbbbbbbbbbb</div>
            <div class="col-1 bg-white text-black" align="center">ccccccccccc</div>
            <div class="col-1 bg-white text-black" align="center">ddddddddddd, ddddddddddd, dddddddddddd</div>
            <div class="col-1 bg-white text-black" align="center">eeeeeeeeeee</div>
            <div class="col-1 bg-white text-black" align="center">fffffffffff</div>
            <div class="col-1 bg-white text-black" align="center">ggggggggggg</div>
            <div class="col-2"></div>
</div>

, и я получил

Что мне действительно нужно, так это выровнять текст в каждом div по низу и по вертикали по центру. Например, текст «aaaaaaaaaaa» должен находиться в той же строке, что и третья строка «dd ddddddddd», пока он все еще находится посередине внутри своего div. Звучит как легкая работа, но я все еще не могу понять это после поисков. Как этого достичь?

Answer 1

Если вам нужно выровнять элементы по вертикали по центру, вам нужно будет использовать «align-items-center» вместе с «row». Для получения дополнительной информации о макете сетки bootstrap, проверьте здесь .

<div class="row align-items-center">
    <div class="col-2"></div>
    ...
</div>