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

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

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

Метод 1

Метод 1 из 2:

CSS

Загрузить PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/2974143-7.jpg\/v4-460px-2974143-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/2974143-7.jpg\/v4-728px-2974143-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

Реклама

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

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/2974143-8.jpg\/v4-460px-2974143-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/2974143-8.jpg\/v4-728px-2974143-8.jpg","smallWidth":460,"smallHeight":349,"bigWidth":728,"bigHeight":553,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 div 
 . 
 a 
 { 
 }

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/2974143-9.jpg\/v4-460px-2974143-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/2974143-9.jpg\/v4-728px-2974143-9.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/2974143-11.jpg\/v4-460px-2974143-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/2974143-11.jpg\/v4-728px-2974143-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/2974143-12.jpg\/v4-460px-2974143-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/2974143-12.jpg\/v4-728px-2974143-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 < 
 style 
 > 
 div 
 . 
 a 
 { 
 text-align 
 : 
 center 
 ; 
 } 
 </ 
 style 
 > 
 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h2 
 > 
 Пожертвования 
 приветствуются 
 </ 
 h2 
 > 
 < 
 p 
 > 
 Спасибо 
 </ 
 p 
 > 
 </ 
 div 
 >

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/2974143-13.jpg\/v4-460px-2974143-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/2974143-13.jpg\/v4-728px-2974143-13.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 <! 
 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 года этот тег все еще работает в некоторых веб-браузерах, но, скорее всего, в ближайшее время от него вообще откажутся.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/2974143-2.jpg\/v4-460px-2974143-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/2974143-2.jpg\/v4-728px-2974143-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Прокрутите вниз, чтобы найти заголовок, абзац или другой текст, который будет отцентрирован.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cd\/2974143-3.jpg\/v4-460px-2974143-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/2974143-3.jpg\/v4-728px-2974143-3.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Добавьте тег "center" до и после текста. Этот тег имеет формат <center>text</center> , где text – это центрируемый текст. Если в тексте есть теги (например, "<p></p>" для текста абзаца), теги "center" можно вставлять за пределами существующих тегов:
```
 < 
 center 
 >< 
 h1 
 > 
Добро пожаловать на мой сайт </ 
 h1 
 ></ 
 center 
 > 
 < 
 center 
 > 
Чувствуйте себя как дома! </ 
 center 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cb\/2974143-4.jpg\/v4-460px-2974143-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cb\/2974143-4.jpg\/v4-728px-2974143-4.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Просмотрите документ HTML. Он должен выглядеть примерно так: ^{[4]
X
Источник информации}
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 >< 
 center 
 > 
Добро пожаловать на мой сайт </ 
 center 
 ></ 
 h1 
 > 
 < 
 center 
 > 
Чувствуйте себя как дома! </ 
 center 
 > 
 < 
 p 
 > 
На этом сайте можно найти различную информацию. </ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
Реклама

[1]

[2]

[3]

[4]

Войти

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

Шаги

CSS

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

Дополнительные статьи

Источники

Об этой статье

Была ли эта статья полезной?

Дополнительные статьи

Избранные статьи

Актуальные статьи

Избранные статьи

Избранные статьи

Избранные статьи

Избранные статьи

Explore Categories