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

В этой статье мы расскажем вам, как отцентрировать текст на 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>
```

How.com.vn Русский: Step 4 Просмотрите документ HTML.

Он должен выглядеть примерно так: ^{[4]XИсточник информации}

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