CSS: как выровнять строчку текста во вложенном элементе по центру
Если внутрь блока, например, абзаца <p>
или раздела <div>
, вложен ещё один элемент и при этом он показан "как рисунок", то есть, с display: inline-block;, а мы хотим во вложенном блоке чего-нибудь написать по центру.
Нам достаточно, чтобы работало для однострочных элементов и возиться с хитрым позиционированием не хочется. Вот что вышло:
Пример прогресс-бара 50% внутри абзаца
И сама разметка со стилем:
<style> .progressBar { display: inline-block; text-align: center; width: 100px; height: 2em; line-height: 2em; /* Одинаковые значения height и line-height сработают как вертикальное выравнивание для однострочных элементов */ background-color: #fdf; border: 1px solid blue; padding: 1px; } </style> <p>Пример прогресс-бара <span class="progressBar">50%</span> внутри абзаца </p>
Для вертикального выравнивания применяется также свойство display: table-cell
к родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и свойство vertical-align
.
<style> .wrapper { display: table-cell; height: 100px; vertical-align: middle; border: 1px dotted black; /* только для наглядности */ } </style> <div class="wrapper"> Вертикальное выравнивание </div>
Ещё один способ выравнять элемент по вертикали - задать ему фиксированную высоту
и применить position: absolute
плюс отрицательный margin-top
, равный половине высоты выравниваемого элемента. Родительскому блоку должна быть при этом присвоена position: relative
.
<style> .wrapper { position: relative; height: 400px; border: 1px dotted black; /* только для наглядности */ } .wrapper p { height: 200px; margin: -100px 0 0 0; position: absolute; top: 50%; border: 1px dotted blue; /* только для наглядности */ } </style> <div class="wrapper"> <p>Вертикальное выравнивание</p> </div>
Листинги можно сохранить как документы .html в кодировке Юникода UTF-8 и выполнить в своём браузере. Подробнее о выравнивании средствами HTML 5 и CSS написано в этой статье.
10.02.2021, 12:04 [944 просмотра]