Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
115. Горизонтальное и вертикальное выравнивание в CSS
Более используемым свойством, чем text-indent
, является свойство text-align
. Оно определяет горизонтальное выравнивание текста, относительно границ блока. Далее синтаксис свойства text-align
:
text-align: left | center | right | justify | inherit;
left
– линейное содержимое (текст, изображение) будет выравнено по левому краю;center
– линейное содержимое (текст, изображение) будет выравнено по центру;right
– линейное содержимое (текст, изображение) будет выравнено по правому краю;justify
– текст будет выравнен по левому краю и правому краю (растянут, при необходимости).
Для горизонтального выравнивания все просто. Куда сложнее центрировать по вертикали. Давайте создадим div
блок и поместим в него текст в абзаце. После чего попробуем горизонтально центрировать его.
<div>
<p>Текст по центру</p>
</div>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
}
p {
width: 100%;
text-align: center;
}
Немного позднее вы познакомитесь с позиционированием (свойство position) и лучше поймете, как это работает. А пока забежим вперед и применим это свойство. Для родительского контейнера div
зададим аргумент relative
, а для дочернего absolute
. Так же укажем смещение от верха родительского блока 50%
, т.е. ровно середина.
div {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
p {
width: 100%;
text-align: center;
position: absolute;
top: calc(50%);
}
Таким образом мы добились не совсем середину. Мы выровняли по верхнему срезу текста. По умолчанию, высота текста 1.25em
. Если вы забыли про эту единицу измерения, то вернитесь к этому уроку.
Итак, теперь сместим выше на половину этой длины, т.е. на 0.625em
при помощи свойства margin-top
.
p {
width: 100%;
text-align: center;
position: absolute;
top: calc(50%);
margin-top: -0.625em;
}
Такими нехитрыми манипуляциями мы выровняли текст по центру блока не только по горизонтали, но и по вертикали.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ