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 [941 просмотр]