Как расположить блок по центру без костылей (ссылка на codepen внутри)?

ссылка на кейс (codepen)

Я хочу расположить блок с текстом (.text) по центру относительно блока .box.
Сейчас блок с текстом (.text) располагается по центру относительно content-box блока родителя. Что разумеется логично, но меня интересует, как можно расположить блок по центру относительно border-box блока родителя.
При этом если текста будет больше, он не должен заходить на кнопку, просто блок .box увеличивает свою высоту.

Те решения, что мне приходят в голову очень костыльные.

Посоветуйте что-нибудь, желательно с flex.

5d16e2e91994f051323881.png

сейчас текст располагается по центру голубого прямоугольника, а мне нужно, чтобы располагался по центру желтого

И сделать верхний паддинг такой же как нижний не вариант, он должен быть меньше

--------------------------------------------------------------------------
UPD:
Вот так нужно, только без костылей
5d16f44e29228910147200.png
  • Вопрос задан
  • 265 просмотров
Решения вопроса 1
wqertAnna
@wqertAnna Автор вопроса
Решение найдено
https://codepen.io/anon/pen/xopBZw
5d17123760577310368315.png

блок сверху светло-фиолетовый (фон добавила для наглядности, так разумеется он прозрачный) это :before
со стилями:
{  
  min-height: 20px;
    max-height: 80px;
    flex-grow: 8;
    width: 100%;
}


т.е. от текста до верхней и нижней границы блока .box (тот, что с розовым border) одинаковое расстояние (стрелки) вне зависимости от количества текста, если нет переполнения.
При переполнении верхний блок сжимается
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы