Как отцентрировать текст в HTML

Соавтор(ы): Команда wikiHow

В этой статье мы расскажем вам, как отцентрировать текст на HTML-сайте с помощью CSS. В HTML это делалось через тег <center>, который теперь считается устаревшим и больше не работает в большинстве браузеров.^{[1] X Источник информации}

Метод 1

Метод 1 из 2:

CSS

Загрузить PDF

Хотя тег <center> устарел, можно создать новый элемент и добавить его на страницу, чтобы отцентрировать текст в пределах этого элемента. Если у вас нет отдельного файла для стилей CSS, найдите их в верхней части HTML-файла между тегами "<style>" и "</style>".^{[2] X Источник информации}

Реклама

Если указанных тегов нет, добавьте их после тега <body> в верхней части файла, например, так:
```
<!DOCTYPE html>
<html>
<body>
<style>

</style>
```

Создайте класс, который отцентрирует текст. Тег <div> сообщит HTML-документу ссылку на указанный раздел текста, поэтому для этого тега нужно создать класс. Между тегами "style" введите следующий контент, а после ввода первой строки дважды нажмите клавишу ↵ Enter.

div.a {

}

Добавьте свойство text-align. Введите text-align: center; между двумя фигурными скобками в разделе div.a. Заголовок должен выглядеть следующим образом:

<!DOCTYPE html>
<html>
<body>
<style>
div.a {
	text-align: center;
}
</style>

Добавьте соответствующий тег div к тексту, который нужно отцентрировать. Для этого введите тег <div class="a"> над текстом, который будет отцентрирован, а затем введите тег </div> под этим текстом. К примеру, чтобы отцентрировать заголовок и текст первого абзаца, введите:

<div class="a">

<h1>Добро пожаловать на мой сайт</h1>
<p>На этом сайте можно найти различную информацию.</p>

</div>

Используйте тег div.a, чтобы отцентрировать другие элементы. Чтобы отцентрировать другой элемент (например, контент между тегами <p></p> и <h2></h2>), введите <div class="a"> перед элементом и </div> после элемента. Поскольку в качестве команды центрирования уже указана "div.a", текст будет центрироваться так же, как раньше:

<style>
div.a {
	text-align: center;
}
</style>


<div class="a">

<h2>Пожертвования приветствуются</h2>
<p>Спасибо</p>

</div>

Просмотрите свой документ. Хотя его содержимое может быть другим, документ должен выглядеть примерно так: ^{[3] X Источник информации}

<!DOCTYPE html>
<html>
<body>
<style>
div.a {
	text-align: center;
}
</style>

<div class="a">
<h1>Добро пожаловать на мой сайт</h1>
<p>На этом сайте можно найти различную информацию.</p>
</div>

<div class="a">
<h2>Пожертвования приветствуются</h2>
<p>Спасибо</p>
</div>

</body>
</html>

Метод 2

Метод 2 из 2:

Тег центрирования в HTML

Загрузить PDF

1

Откройте документ HTML. В этом методе описано, как использовать HTML-тег <center>, который уже устарел. По состоянию на декабрь 2018 года этот тег все еще работает в некоторых веб-браузерах, но, скорее всего, в ближайшее время от него вообще откажутся.
Прокрутите вниз, чтобы найти заголовок, абзац или другой текст, который будет отцентрирован.
3
Добавьте тег "center" до и после текста. Этот тег имеет формат <center>text</center>, где text – это центрируемый текст. Если в тексте есть теги (например, "<p></p>" для текста абзаца), теги "center" можно вставлять за пределами существующих тегов:
```
<center><h1>Добро пожаловать на мой сайт</h1></center>
<center>Чувствуйте себя как дома!</center>
```
4
Просмотрите документ HTML. Он должен выглядеть примерно так: ^{[4] X Источник информации}
```
<!DOCTYPE html>
<html>
<body>

<h1><center>Добро пожаловать на мой сайт</center></h1>
<center>Чувствуйте себя как дома!</center>
<p>На этом сайте можно найти различную информацию.</p>

</body>
</html>
```
Реклама