Як відцентрувати текст в HTML (з ілюстраціями)

У цій статті ми розповімо вам, як відцентрувати текст на HTML-сайті за допомогою CSS. В HTML це робилося через тег&#lt;center&#gt; , який тепер вважається застарілим і більше не працює в більшості браузерів. ^{[1]
X
Джерело інформації}

Метод1З 2:

CSS

Відкрийте файл зі стилями CSS. хоча тег &#lt;center&#gt; застарілий, можна створити новий елемент і додати його на сторінку, щоб відцентрувати текст в межах цього елемента. Якщо у вас немає окремого файлу для стилів CSS, знайдіть їх у верхній частині HTML-файлу між тегами " &#lt;style &#gt;"і" &#lt;/style&#gt;". ^{[2]
X
Джерело інформації}

Якщо зазначених тегів немає, додайте їх після тега&#lt;body&#gt; у верхній частині файлу, наприклад, так:
```
&#lt;!DOCTYPE html&#gt;
&#lt;Html&#gt;
&#lt;Body&#gt;
&#lt;Style&#gt;

&#lt;/Style&#gt;
```

Створіть клас, який відцентрує текст. Тег&#lt;div&#gt; повідомить HTML-документу посилання на вказаний розділ тексту, тому для цього тега потрібно створити клас. Між тегами "style" введіть наступний контент, а після введення першого рядка двічі натисніть клавішу ↵ Enter .

Div.A {

}

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

&#lt;!DOCTYPE Html&#gt;
&#lt;Html&#gt;
&#lt;Body&#gt;
&#lt;Style&#gt;
Div.A {
	Text-align: Center;
}
&#lt;/Style&#gt;

Додайте відповідний тегdiv до тексту, який потрібно відцентрувати. Для цього введіть тег &#lt;div class="a"&#gt; над текстом, який буде відцентрований, а потім введіть тег &#lt;/div&#gt; під цим текстом. Наприклад, щоб відцентрувати заголовок і текст першого абзацу, введіть:

&#lt;Div Class="a"&#gt;

&#lt;H1&#gt;Добро Ласкаво просимо На Мій Сайт&#lt;/H1&#gt;
&#lt;P&#gt;На Цьому Сайті Можна Знайти Різну Інформацію.&#lt;/P&#gt;

&#lt;/Div&#gt;

Використовуйте тегdiv.a , щоб відцентрувати інші елементи. Щоб відцентрувати інший елемент (наприклад, вміст між тегами &#lt;p&#gt;&#lt;/p&#gt; і &#lt;h2&#gt;&#lt;/h2&#gt; ), введіть &#lt;div class="a"&#gt; перед елементом і &#lt;/div&#gt; після елемента. Оскільки в якості команди центрування вже вказана " div.a", текст буде центруватися так само, як раніше:

&#lt;Style&#gt;
Div.A {
	Text-align: Center;
}
&#lt;/Style&#gt;


&#lt;Div Class="a"&#gt;

&#lt;H2&#gt;Пожертвування Вітаються&#lt;/H2&#gt;
&#lt;P&#gt;Дякую&#lt;/P&#gt;

&#lt;/Div&#gt;

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

&#lt;!DOCTYPE Html&#gt;
&#lt;Html&#gt;
&#lt;Body&#gt;
&#lt;Style&#gt;
Div.A {
	Text-align: Center;
}
&#lt;/Style&#gt;

&#lt;Div Class="a"&#gt;
&#lt;H1&#gt;Добро Ласкаво просимо На Мій Сайт&#lt;/H1&#gt;
&#lt;P&#gt;На Цьому Сайті Можна Знайти Різну Інформацію.&#lt;/P&#gt;
&#lt;/Div&#gt;

&#lt;Div Class="a"&#gt;
&#lt;H2&#gt;Пожертвування Вітаються&#lt;/H2&#gt;
&#lt;P&#gt;Дякую&#lt;/P&#gt;
&#lt;/Div&#gt;

&#lt;/Body&#gt;
&#lt;/Html&#gt;

Метод2З 2:

Тег центрування в HTML

Відкрийте документ HTML. у цьому методі описано, як використовувати HTML-тег &#lt;center&#gt;, який вже застарів. Станом на грудень 2018 року цей тег все ще працює в деяких веб-браузерах, але, швидше за все, найближчим часом від нього взагалі відмовляться.
Знайдіть текст, який потрібно відцентрувати. прокрутіть вниз, щоб знайти заголовок, абзац або інший текст, який буде відцентрований.
Додайте тег "center" до і після тексту. цей тег має формат &#lt;center&#gt;text&#lt;/center&#gt; , де text – це центрований текст. Якщо в тексті є теги (наприклад," &#lt;p&#gt;&#lt;/p&#gt; "для тексту абзацу), теги "center" можна вставляти за межами існуючих тегів:
```
&#lt;Center&#gt;&#lt;H1&#gt; Ласкаво просимо на мій сайт
&#lt;/H1&#gt;&#lt;/Center&#gt;
&#lt;Center&#gt; відчувайте себе як вдома!
&#lt;/Center&#gt;
```

Перегляньте документ HTML. він повинен виглядати приблизно так: ^{[4]
X
Джерело інформації}

&#lt;!DOCTYPE html&#gt;
&#lt;Html&#gt;
&#lt;Body&#gt;

&#lt;H1&#gt;&#lt;Center&#gt; Ласкаво просимо на мій сайт
&#lt;/Center&#gt;&#lt;/H1&#gt;
&#lt;Center&#gt; відчувайте себе як вдома!
&#lt;/Center&#gt;
&#lt;P&#gt; на цьому сайті можна знайти різну інформацію.
&#lt;/P&#gt;

&#lt;/Body&#gt;
&#lt;/Html&#gt;