Теория урока

129. Горизонтальное и вертикальное выравнивание в CSS

Более используемым свойством, чем text-indent, является свойство text-align. Оно определяет горизонтальное выравнивание текста, относительно границ блока. Далее синтаксис свойства text-align:

Пример
text-align: left | center | right | justify | inherit;
  1. left – линейное содержимое (текст, изображение) будет выравнено по левому краю;
  2. center – линейное содержимое (текст, изображение) будет выравнено по центру;
  3. right – линейное содержимое (текст, изображение) будет выравнено по правому краю;
  4. 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;
}

Такими нехитрыми манипуляциями мы выровняли текст по центру блока не только по горизонтали, но и по вертикали.

Похожие уроки и записи блога

Тег TD в HTML таблицахТаблицы
Свойство background для работы с фономЦвета и фон
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Первое знакомство с PythonЗнакомство с Python
Рамки для таблиц, строк и ячеек в HTMLТаблицы
Добавляем градиент к фону элементаЦвета и фон
Тег TR в HTML таблицахТаблицы
Свойство border для создания границОтступы, рамки, поля
Форматирование строк в PythonЗнакомство с Python
ПРОЧИТАНО
Следующий урок
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно