Не получается выровнять текст по вертикали

Question

    .category {
        width: 120px;
        height: 120px;
        color: white;
        font-weight: 600;
        text-align: center;
        display: inline-block;
        background: rgb(26, 26, 26);
        margin: 2px;
        vertical-align: middle;

    }

<p class="category" style="background: #2271b1 !important;" onclick="loadCId(86)">Прав. Повар</p>
<p class="category" style="" onclick="loadCId(87)">БЛА ЕДА</p></div>

<div style="z-index: 90; position: fixed; top:175px; right: 0; background: #f3f3f3; border-radius: 10px; padding: 20px;">
<p class="product2">Итого<br>1240 руб</p>
<p class="product2" onclick="loadpage('content/plugins/Ekassir/finOrder.php')">Продолжить</p>
<p class="product2" onclick="">Ожидание 60мин</p>
<p class="product2" onclick="claerCart()">Аннулировать заказ</p></div>

Answer 1

Простое решение:

(добавил line-height)

    .category {
        width: 120px;
        height: 120px;
        line-height: 120px;
        color: white;
        font-weight: 600;
        text-align: center;
        display: inline-block;
        background: rgb(26, 26, 26);
        margin: 2px;
        vertical-align: middle;

    }

<p class="category" style="background: #2271b1 !important;" onclick="loadCId(86)">Прав. Повар</p>
<p class="category" style="" onclick="loadCId(87)">БЛА ЕДА</p></div>

Чуть более сложное решение (через flexbox и margin)

.category {
    width: 120px;
    height: 120px;
    color: white;
    font-weight: 600;
    text-align: center;
    display: flex;
    background: rgb(26, 26, 26);
}

.category .content {
  margin: auto;
}

<div class="category" style="background: #2271b1 !important;" onclick="loadCId(86)">
  <p class="content">Прав. Повар</p>
</div>

<div class="category" style="" onclick="loadCId(87)">
  <p class="content">БЛА ЕДА</p>
</div>

БЛОГ НА HUSL

Не получается выровнять текст по вертикали

Ответы (1 шт):