Содержание
Как выровнять текст по центру в CSS
В CSS можно центрировать текст как по горизонтали, так и по вертикали, используя несколько различных методов, включая поля, подложки, flexbox, высоту строки и text-align. Способ центрирования текста зависит от того, как оформлена ваша веб-страница, и от того, хотите ли вы центрировать текст по горизонтали, по вертикали или по обоим направлениям. Ниже мы подробно рассмотрим центрирование текста по вертикали с помощью этих методов.
Как горизонтально центрировать текст в CSS
Горизонтальное центрирование текста в CSS может быть достигнуто с помощью свойств text-align и margin CSS. Свойство text-align выравнивает сам текст, в то время как свойство margin используется для центрирования контейнера, в котором находится текст.
Горизонтальное выравнивание текста с помощью CSS-свойства text-align
В CSS добавьте свойство text-align: center к селектору, содержащему текст, который нужно выровнять по центру.
HTML
<div class="center-me">
<h1>Выровняйте этот заголовок!</h1>
</div>
Вход в полноэкранный режим
CSS
.center-me {
text-align: center;
}
Вход в полноэкранный режим
Выход
Если вы хотите, чтобы весь текст был выровнен по центру всей страницы, вы можете использовать звездочку (*) или селекторы body вместо конкретного селектора (см. фрагмент CSS ниже).
CSS
/* Вариант 1 - селектор тела */
тело {
text-align: center;
}
/* Вариант 2 - Селектор звездочек */
* {
text-align: center;
}
Вход в полноэкранный режим
Горизонтальное выравнивание текста с помощью CSS-свойства margin
Когда вы работаете с элементом на уровне блока, вы можете выровнять его по центру с помощью свойства margin: auto в CSS. Это распространенная практика, когда нужно выровнять по центру текст, находящийся внутри блока содержимого. Маргинальное поле auto центрирует содержащий блок, но выравнивание текста остается неизменным.
HTML
<div class="text-container">
<h1>Глава</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus urna et turpis tempus
pulvinar. Vestibulum laoreet lectus eget egestas mattis. Donec et leo consectetur, elementum est
ac, aliquet nisl. Nunc aliquet, est sollicitudin suscipit auctor, lacus erat mattis ex, id
bibendum lorem neque vitae mauris. Ut et tellus lectus. Maecenas non enim eget ante semper
accumsan in at mi. Nam iaculis nec ex sed sodales. Morbi id euismod sapien.
</div>
CSS
.text-container {
margin: auto;
ширина: 450px;
цветфона: зеленый;
padding: 30px;
}
Выход
Этот вывод показывает, что margin: auto центрирует блок содержимого на уровне блока (зеленый), но не изменяет выравнивание самого текста (в данном случае он оставлен по умолчанию, выровненным по левому краю).
Если мы хотим изменить выравниваниечтобы поместить текст в поле содержимого, мы можем использовать для него свойство text-align (см. ниже).
CSS
/* Обратите внимание на добавление text-align: center */
.text-container {
margin: auto;
ширина: 450px;
цветфона: зеленый;
padding: 30px;
text-align: center;
}
Выход
Как выровнять текст по центру в CSS
Выровнять текст по вертикали в CSS можно с помощью свойств line-height и padding CSS. Line-height регулирует минимальную высоту каждой строки, на которой располагается текст - можно представить это как регулировку пространства между строками на линованном листе бумаги. Padding добавляет пространство между краем элемента (границей) и элементами, которые он содержит.
Вертикальное выравнивание текста с помощью CSS-свойства line-height
CSS-свойство line-height обычно используется для регулировки расстояния между несколькими строками текста (например, в тексте записи блога), но его также можно использовать для вертикального выравнивания текста, если вам известна высота содержащего его элемента.
Вот пример текста внутри содержащего div, у которого явно заданы высота и ширина.
HTML
<div class="text-container">Это некоторый текст</div>
CSS
p {
font-size: 1.5rem;
}
.text-container {
ширина: 450px;
высота: 200px;
background-color: green;
}
Выход
Как вы можете видеть ниже, наш текст по умолчанию будет размещен в левом верхнем углу.
CSS с выравниванием по высоте строки
Здесь мы добавили свойство line-height и установили его на высоту содержащего div.
CSS
p {
font-size: 1.5rem;
}
.text-container {
font-weight: 700;
ширина: 450px;
высота: 200px;
цветфона: зеленый;
line-height: 200px;
}
Выход
Теперь текст выровнен по вертикали внутри содержащего его div. Обратите внимание, что если вы напишете слишком много текста до момента, когда он перейдет на следующую строку, результат может быть нежелательным.
Вертикальное выравнивание с помощью CSS-свойства padding
CSS-свойство padding обычно используется для добавления пространства между краями (границей) элемента и его содержимым. В некоторых случаях оно может использоваться для вертикального выравнивания текста внутри элемента.
HTML
<div class="text-container">Это некоторый текст</div>
CSS (длинная форма)
В этом CSS длинной формы используются padding-top и padding-bottom. свойства. Вы можете сжать эти свойства в одну строку, как показано в разделе ”Альтернатива CSS (сокращение)” ниже.
.text-container {
background-color: green;
ширина: 450px;
padding-top: 60px;
padding-bottom: 60px;
}
Альтернатива CSS (сокращение)
Обратите внимание, что свойство padding выполняет двойную функцию, заменяя padding-top и padding-bottom в сокращенном варианте, показанном ниже. Оба варианта CSS, приведенный выше, и сокращенный CSS, показанный здесь, действительны.
.text-container {
background-color: green;
ширина: 450px;
padding: 60px 0;
}
Выход
Установив одинаковые значения верхнего и нижнего отступов, наш текст, содержащий div, увеличивается в высоту, вытесняя наш текст в центр по вертикали.
Как горизонтально и вертикально центрировать текст в CSS
Иногда необходимо выровнять текст по центру как по горизонтали, так и по вертикали. Мы можем добиться этого, используя flexbox в нашем CSS, и мы подробно рассмотрим это ниже.
Как использовать flexbox для горизонтального и вертикального центрирования текста
Для горизонтального и вертикального центрирования текста мы можем использовать display: flex наряду с несколькими другими свойствами. В общей сложности мы установим свойства display, justify-content и align-items.
HTML
Мы поместили наш текст в содержащий элемент (div).
<div class="text-container">
Это некоторый текст
</div>
CSS
Мы установили содержащий div в flexbox, а затем выровняли текст. Мы используем justify-content: center для выравнивания текста по горизонтали и align-items: center для выравнивания текста по вертикали.
.text-container {
display: flex;
justify-content: center;
align-items: center;
background-color: green;
ширина: 450px;
height: 300px;
}
Выход
