Выравнивание текста по центру с помощью CSS может придать странице организованный и симметричный вид, привлекая внимание посетителя к определенным элементам на странице. Например, заголовки, блочные цитаты и призывы к действию часто центрируются, чтобы нарушить поток документа и привлечь внимание читателя. Вот почему текст CTA ниже расположен по центру. Чтобы убедиться, что вы понимаете этот распространенный тип выравнивания, мы рассмотрим свойство text-align. Затем мы шаг за шагом рассмотрим, как выровнять текст по центру по горизонтали и вертикали.
Свойство CSS Text-Align
Свойство CSS text-align – это правило, которое центрирует текст по горизонтали внутри блочного элемента. Синтаксис выглядит следующим образом:
div {
text-align: center;
}
Учитывая это, давайте рассмотрим множество способов использования свойства text-align для центрирования текста в CSS.
Как выровнять текст по центру в CSS
Чтобы выровнять текст по центру в CSS, используйте свойство text-align и задайте ему значение ‘center’. Эту технику можно использовать внутри блочных элементов, таких как div. Вы также можете центрировать текст в HTML, что удобно, если вы хотите центрировать только отдельные элементы на странице в каждом конкретном случае. Но если вас интересует центрирование элемента определенного типа, например, всех H1 в вашем блоге, лучше сделать это в CSS.
Выравнивание текста по центру в CSS
Ниже мы рассмотрим несколько уроков по центрированию текста снаружи и внутри других элементов.
Выравнивание текста по центру с помощью свойства Text-Align
Начнем с простого примера. Допустим, у вас есть веб-страница, состоящая только из текста, и вы хотите выровнять весь текст по центру. Тогда вы можете использовать универсальный селектор CSS (*) или селектор типа body для выделения каждого элемента на странице. Вот как это делается:
- Откройте файл CSS.
- Введите универсальный селектор * и откройте скобки стилей.
- Затем установите для свойства text-align значение center.
Вот как это выглядит:
HTML код:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>
</head>
<body>
<h2>How to Center Align Text in CSS</h2>
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>
<h2>The Explanation</h2>
<p>Using either the universal selector or type selector <strong>body</strong> and the CSS text-align property set to “center,” everything on the page will be centered.</p>
</body>
</html>CSS код:
/* CSS Centering Code with the Universal Selector "*" */
* {
text-align: center;
}
/*Alternative CSS Centering Code with the "body" Selector*/
body {
text-align: center;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот более подробный взгляд на результат:
Вы можете использовать его с другими селекторами, такими как p или body, или с любым из элементов заголовка, которые мы рассмотрим ниже.
Центрирование заголовка в CSS
Для центрирования заголовка в CSS мы применяем те же шаги, что и выше, за исключением использования одного из селекторов заголовков, таких как h1, h2, h3, h4 и так далее. Вот как это делается:
- Откройте файл CSS.
- Введите выбранный вами селектор заголовков, например, h1, h2, h3 и т.д., и откройте скобки стиля.
- Затем установите свойство text-align на center.
HTML код:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>
</head>
<body>
<h1> A Non-Centered H1 Heading</h1>
<p>This is dummy text. This is more dummy text. This is more dummy text. </p>
<h2>A Centered H2 Heading</h2>
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>
<h2>The Explanation</h2>
<p>Using the h2 selector, we set the CSS text-align property to “center.” All H2 headings on the page have been centered.</p>
</body>
</html>CSS код:
/* CSS Centering Code with the h2 Selector "*" */
h2 {
text-align: center;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Результат:
Если вы хотите выровнять по центру несколько типов заголовков, вы можете задать селектор: h1, h2, h3, h4 { text-align: center; }. Если вы хотите выровнять по центру только определенную группу заголовков:
- Создайте CSS-класс и примените его к заголовкам, которые вы хотите выровнять по центру.
- Например, вы можете присвоить определенным заголовкам H2 класс “highlight”, то есть <h2 class=”highlight”>.
- Откройте файл CSS.
- Введите селектор класса, .highlight, и откройте скобки стиля.
- Затем установите для свойства text-align значение center.
Центрирование типа элемента HTML с помощью свойства Text-Align
Что если вы не хотите, чтобы весь текст на странице был выровнен по центру, или ваша страница содержит изображения и другие элементы, помимо текста? В этом случае вы используете то же свойство text-align, но другой CSS-селектор. Мы снова воспользуемся примером с h2. Допустим, вы хотите, чтобы заголовки H2 располагались по центру страницы, а абзацы были выровнены по левому краю. Тогда вы используете селектор типа h2 и зададите свойству text-align значение center. Вам не нужно добавлять дополнительный код для выравнивания абзацев – по умолчанию они будут выровнены по левому краю.
Вот как это выглядит:
HTML код:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>
</head>
<body>
<h2>How to Center Align Text in CSS</h2>
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>
<h2>The Explanation</h2>
<p>The default alignment is left. So if you want to change the alignment of the heading text, for example, then you can use a type selector and the CSS text-align property set to “center.” Everything else on the page — in this case, the paragraphs — will remain flushed against the left margin.</p>
</body>
</html>CSS код:
/* CSS Centering Code with the Type Selector "h2" */
h2 {
text-align: center;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот более подробный взгляд на результат:
Центрирование отдельных элементов с помощью идентификатора CSS
Если вы хотите выровнять по центру только один элемент на странице, то вы можете добавить атрибут ID к элементу и нацелить его с помощью селектора ID. Или можно использовать встроенный CSS. Сначала давайте используем атрибут ID и селектор для заголовка H2. Вот как это делается:
- Создайте CSS ID и примените его к заголовку, который вы хотите отцентрировать.
- Здесь мы будем использовать ID “center”, то есть <h2 id=”center”>.
- Откройте файл CSS.
- Введите селектор ID, #center, и откройте свои стилевые скобки.
- Затем установите свойство text-align на center.
Вот CSS:
/* CSS Centering Code with the ID Selector "#center" */
#center {
text-align: center;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот более подробный взгляд на результат:
Выравнивание текста внутри кнопки с помощью встроенного CSS
Теперь давайте воспользуемся встроенным CSS. Но вместо центрирования заголовков и абзацев, давайте центрировать текст внутри другого элемента. Допустим, я создаю веб-страницу с помощью Bootstrap CSS и добавляю кнопку Bootstrap, которую хочу отцентрировать на странице. Выравнивание кнопки и текста внутри кнопки будет несколько отличаться от приведенных выше примеров. Это связано с тем, что свойство text-align действует только на содержимое внутри элементов блочного уровня, таких как заголовки и абзацы, но не на встроенные элементы, такие как кнопки. Поэтому вот что мы сделаем вместо этого:
- Откройте HTML-файл.
- Оберните кнопку в div.
- Затем добавьте объявление инлайн-стиля к открывающему тегу div, т.е. <div style=”[вставьте правила стиля]”>.
- Наконец, внутри кавычек установите свойство text-align по центру.
Вот как это выглядит:
HTML код:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>
</head>
<body>
<h2>How to Center Align Text in CSS</h2>
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. </p>
<h3>The Explanation</h3>
<p>If I want to center an inline element, like a button, then I need to wrap it in a block-level element, like a div first. Only then can I can apply the text-align property to the div. If I want to center this div only, I can use a style attribute that contains the text-align property set to “center.” Everything else on the page will remain flushed against the left margin.</p>
<div style="text-align:center">
<button type="button" class="btn btn-primary">Click Me</button>
</div>
</body>
</html>CSS код:
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
.btn{
background-color: #0068B1;
font-family: 'Lexend Deca', sans-serif;
text-transform: uppercase;
color: white;
padding: 20px;
width: 200px;
border-radius: 10px;
}
.btn:hover{
background-color: #408EC5;
}Вот более подробный взгляд на результат:
Выравнивание блочного элемента по центру с помощью свойства Margin
Если вы центрируете весь блочный элемент, например div, свойство text-align не подойдет. (Обратите внимание, что оно работает при центрировании содержимого внутри div.) Вместо этого вы можете использовать свойство margin для центрирования всего элемента. Вот как это делается:
- Откройте файл CSS.
- Найдите селектор CSS для нужного вам блочного элемента или создайте его.
- Откройте скобки стиля.
- Объявите ширину элемента, например width: 400px;.
- Затем установите для margin значение auto.
Вот как это выглядит:
HTML код:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>
</head>
<body>
<h2>How to Center Align Text in CSS</h2>
<div id="center">
<p>This is dummy text <strong>inside a div</strong>. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. </p>
</div>
<h3>The Explanation</h3>
<p>The paragraph above is enclosed in a div, which is a block element. To center the entire element, use the ID selector "#center" and set the margin to "auto." Note that this is different from centering the <em>text</em> inside a div. To do that, use the text-align property and set it to "center". </p>
</body>
</html>CSS код:
#center {
width: 400px;
margin: auto;
/* Optional Styling */
padding: 20px;
border-style: solid;
border-color: #B6C7D6;
border-radius: 20px;
background-color: #EAF0F6;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот более подробный взгляд на результат:
Центрирование текста внутри div
Допустим, вы хотите выровнять div по центру, а также выровнять текст внутри него. Как и в предыдущем примере, добавьте селектор ID “center” к выбранному div, затем установите margin на “auto”. Затем добавьте декларацию “text-align: center”.
Вот как это выглядит:
HTML код:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>
</head>
<body>
<h2>How to Center Align Text in CSS</h2>
<div id="center">
<h3>I am centered dummy text inside a centered div.</h3>
<p>This is dummy text <strong>inside a div</strong>. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. </p>
</div>
<h3>The Explanation</h3>
<p>The paragraph above is enclosed in a div, which is a block element. To center the entire element, use the ID selector "#center" and set the margin to "auto." Then, use the text-align property and set it to "center". </p>
</body>
</html>CSS код:
#center {
width: 400px;
margin: auto;
text-align: center;
/* Optional Styling */
padding: 20px;
border-style: solid;
border-color: #B6C7D6;
border-radius: 20px;
background-color: #EAF0F6;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот более подробный взгляд на результат:
Как видно из приведенных примеров, свойство text-align задает только горизонтальное выравнивание текста. Задание вертикального выравнивания текста является более сложной задачей. Давайте рассмотрим это ниже.
Выравнивание текста по вертикали
Вы можете выровнять текст по вертикали несколькими способами. Для описанных ниже способов текст должен быть заключен в родительский элемент, например div. Начнем с самого простого. Обратите внимание, что если вы хотите, чтобы текст был также выровнен по горизонтали, просто добавьте свойство text-align и установите его на center в любом из приведенных ниже примеров.
Вертикальное центрирование текста с помощью CSS Padding
Одним из самых простых решений для вертикального выравнивания текста является использование верхней и нижней подгонки. Чтобы применить CSS-подстановку к элементу, я могу использовать метод длинной формы и определить в CSS свойства padding-top и padding-bottom. Или я могу использовать сокращение CSS для свойства padding и включить три значения: первое значение будет представлять верхнюю подложку, второе – левую и правую подложки, а третье – нижнюю подложку.
Ниже приведен код CSS с использованием метода сокращения:
/*Centering Code*/
.center {
padding: 50px 0 50px;
background: #FFCEC2;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот результат:
Вертикальное центрирование текста с помощью свойства CSS Line-Height
Для вертикального центрирования текста внутри элемента можно также использовать свойство CSS line-height. Для этого нужно задать свойству значение, равное высоте элемента-контейнера.
Вот CSS:
/*Centering Code*/
.center {
line-height: 150px;
height: 150px;
background: #FFCEC2;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот результат:
Вертикальное центрирование текста с помощью свойств CSS position и transform
Другой метод центрирования текста по вертикали на странице требует использования свойства CSS position и свойства transform. Для начала:
- Установите положение div, содержащего текст, на относительное.
- Далее, давайте изменим стиль абзаца внутри div. Сначала установите его позицию абсолютной, чтобы он был выведен из обычного потока документа.
- Затем установите для свойств left и top значение 50%. Это указывает браузеру выровнять левый и верхний край абзаца с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице).
Проблема в том, что мы не хотим, чтобы края абзаца были выровнены по центру страницы – мы хотим, чтобы центр абзаца был выровнен по центру страницы. Вот тут-то и приходит на помощь свойство CSS transform. Используя метод трансформации, известный как translate(), мы можем перемещать абзац по осям X и Y. Чтобы действительно отцентрировать абзац, мы хотим переместить его на 50% влево и вверх от его текущего положения. Это позволит браузеру поместить центр абзаца в центр страницы.
Вот CSS:
/*Centering Code*/
.center {
position: relative;
height: 150px;
background: #FFCEC2;
}
.center p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот результат:
Вертикальное центрирование текста с помощью Flexbox
Flexbox – один из лучших методов вертикального (и горизонтального) центрирования текста, поскольку он быстро реагирует на изменения и не требует вычисления полей. Сначала необходимо определить родительский контейнер – в данном случае div – как гибкий контейнер. Для этого нужно установить свойство display на “flex”. Затем задайте для свойств align-items и justify-content значение “center”. Это позволит браузеру отцентрировать flex-элемент (div внутри div) по вертикали и горизонтали.
Вот CSS:
/*Centering Code*/
.center {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: #FFCEC2;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}Вот результат:
Следует ли использовать встроенный, внутренний или внешний CSS для выравнивания текста по центру?
Рассматривая различные варианты выравнивания текста по центру с помощью CSS, вы можете задаться вопросом, какой CSS лучше использовать: встроенный, внутренний или внешний. Встроенный CSS включается в открывающий тег элемента, как показано ниже:
<p style=”align-text: center”>Внутренний CSS включается между тегами <style> в заголовке HTML-документа следующим образом:
<html>
<head>
<style>
body {
align-text:center
}
</style>
</head>Внешний CSS относится к CSS во внешней таблице стилей, на которую вы ссылаетесь в теге head вашего HTML-документа. Итак, какой из этих вариантов подходит вам? Если вы центрируете один элемент в блоге или на странице, используйте встроенный CSS. Таким образом, вам не придется создавать CSS-класс или идентификатор только для этого элемента, который затем нужно будет добавить в таблицу стилей. Если вы центрируете тип элемента на одной конкретной странице, вы можете использовать внутренний CSS для центрирования этого элемента, не переходя от одного элемента к другому. Только не забудьте выбрать правильный селектор CSS, чтобы ваши изменения были применимы. Если вы хотите отцентрировать тип элемента на всем сайте, используйте внешнюю таблицу стилей.
Центрирование текста на вашем сайте
Если вы обладаете базовыми знаниями HTML и CSS, вы можете легко выровнять текст по центру на своих веб-страницах. Это поможет вам создать индивидуальные макеты страниц, выделить содержимое и привлечь внимание пользователей при прокрутке сайта.
