Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по 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 по тегу CSS.
