Как я могу центрировать абсолютный позиционный текст внутри жидкости относительно родителя? Я пытаюсь использовать text-align:center
для родительских элементов, но он всегда центрирует дочерний левый угол, а не сам элемент.
CSS: центрирование абсолютного позиционного текста внутри относительного родителя
Ответ 1
Дело в том, что position:absolute;
изменяет ширину элемента, чтобы соответствовать его содержимому, и что text-align: center;
центрирует текст в пределах ширины блока элемента. Поэтому, если вы добавите position: absolute;
, не забудьте увеличить ширину элемента, иначе свойство text-align: center;
будет бесполезным.
Лучший способ решить это - добавить width: 100%;
и left: 0px;
в разделе .text.
Ответ 2
Обновление: то, что я поставил раньше, было неправильным/неправильным
Это должно быть МНОГО ближе к тому, что вы хотите?
Ваш текст относительный, а остальные элементы внутри контейнера абсолютны!
.text {
color:#fff;
padding:50px 0;
display:block;
position:relative;
}
.absolute {
background:#f0f;
height:25px; width:25px;
position:absolute;
top:36px; left:50%;
}
Ответ 3
Теперь вы можете добиться того, что вы хотите более элегантно с Flex. Смотрите, например:
HTML:
<div class="container">
<div class="text">Your text</div>
</div>
CSS:
.container {
position: relative;
width: 400px; /** optional **/
height: 400px; /** optional **/
background-color: red; /** optional **/
}
.text {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center; /** Y-axis align **/
justify-content: center; /** X-axis align **/
}