Центрувати текст у HTML

Автор: Tamara Smith
Дата Створення: 28 Січень 2021
Дата Оновлення: 1 Липня 2024
Anonim
Выравнивание текста по вертикали и по центру с помощью CSS
Відеоролик: Выравнивание текста по вертикали и по центру с помощью CSS

Зміст

Ця wikiHow вчить вас центрувати текст на веб-сайті HTML. Для цього ми використовуємо CSS (каскадні таблиці стилів або таблиці стилів). Раніше ми центрирували в HTML за допомогою центр>тег, але це вже не працює в більшості браузерів.

Крок

Метод 1 з 2: Використання CSS

  1. Відкрийте текстовий файл, в якому ви описуєте свої стилі. Тепер центр>тег більше не використовується, створіть у цьому файлі новий елемент, який буде центрувати текст у певних областях вашого документа HTML. Якщо у вас немає окремого файлу CSS, коди знаходяться вгорі документа HTML між тегами "style>" і "/ style>".
    • Як стиль>- і / стиль>тегів ще немає, ви можете помістити їх безпосередньо під тіло>тег наступним чином:
    • ! DOCTYPE html> html> body> style> / style>

  2. Створіть клас, який центрує текст. div>тег повідомляє вашому документу HTML, до якого конкретного розділу відноситься цей клас. Введіть наступне між тегами "style", обов’язково двічі клацнувши ↵ Введіть після першого рядка:

      div.a {}

  3. Додайте вирівнювання текстумайно. Тип вирівнювання тексту: по центру; між фігурними дужками в див. а-розділ. "Заголовок" тепер виглядає так:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / стиль>

  4. Додайте правильний дивпозначте текст, який потрібно відцентрувати. Ви робите це через div>над цим текстом і закриваючи його символом / div>під цим текстом. Наприклад, якщо ви хочете відцентрувати заголовок та абзац під ним, це виглядає так:

      div> h1> Ласкаво просимо на мій веб-сайт / h1> p> Цей веб-сайт головним чином надає інформацію про речі. / p> / div>

  5. Використовувати див. атег для центрування інших елементів. Коли ви хочете відцентрувати інший елемент, наприклад вміст між тегами p> / p> і h2> / h2>), ви вводите div> для цього елемента і / div> згодом. Оскільки ви вже визначили "div.a" як центруючий CSS-код, ці елементи тепер також відцентровані.

      стиль> div.a {text-align: center; } / style> div> h2> Пожертви вітаються / h2> p> будь ласка / p> / div>

  6. Перевірте свій документ. Хоча текст на вашій веб-сторінці, звичайно, інший, він повинен виглядати приблизно так:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Ласкаво просимо на мій веб-сайт / h1> p> Цей веб-сайт в основному надає інформацію про речі. / p> / div> div> h2> Пожертви вітаються / h2> p> будь ласка / p> / div> / body> / html>

Спосіб 2 із 2: Використання тегу "center" у HTML

  1. Відкрийте свій документ HTML. Цей метод описує, як отримати застаріле центр>тег. Цей метод все ще може працювати в багатьох браузерах, але краще не надто сподіватися на нього.
  2. Знайдіть текст, який потрібно відцентрувати. Прокрутіть документ вниз, поки не знайдете заголовок, абзац або інший текст, який потрібно відцентрувати.
  3. Розмістіть тег "центр" по обидві сторони тексту. Код виглядає так центр> текст / центр>. Тут "текст" - це текст, який потрібно відцентрувати. Якщо в цьому тексті є інші теги, наприклад "p> / p>" перед абзацом, розмістіть теги "center" поза існуючими тегами.

      center> h1> Ласкаво просимо на мій веб-сайт / h1> / center> center> Розслабтеся! / center>

  4. Перевірте свій HTML-документ. Це повинно виглядати приблизно так:

      ! DOCTYPE html> html> body> h1> center> Ласкаво просимо на мій веб-сайт / center> / h1> center> Зробіть це легким для себе! / Center> p1> Цей веб-сайт в основному надає інформацію про речі. / P1> / body > / html>