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

Автор: Tamara Smith
Дата создания: 28 Январь 2021
Дата обновления: 1 Июль 2024
Anonim
Выравнивание текста по вертикали и по центру с помощью CSS
Видео: Выравнивание текста по вертикали и по центру с помощью CSS

Содержание

Из этой статьи вы узнаете, как центрировать текст на HTML-сайте. Для этого мы используем CSS (каскадные таблицы стилей или таблицы стилей). Раньше для центрирования в HTML мы использовали центр>тег, но он больше не работает в большинстве браузеров.

Шагать

Метод 1 из 2: Использование CSS

  1. Откройте текстовый файл, в котором вы описываете свои стили. Теперь центр>больше не используется, создайте новый элемент в этом файле, который будет центрировать текст в определенных областях вашего HTML-документа. Если у вас нет отдельного файла CSS, коды находятся в верхней части документа HTML между тегами «style>» и «/ style>».
    • Как стиль>- а также / стиль>тегов еще нет, вы можете поместить их прямо под тело>тегом следующим образом:
    • ! DOCTYPE html> html> тело> стиль> / стиль>

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

      div.a {}

  3. Добавить выравнивание текстаимущество. Тип выравнивание текста: центр; между скобками в дива-раздел. «Заголовок» теперь выглядит так:

      ! DOCTYPE html> html> body> style> div.a {выравнивание текста: центр; } / style>

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

      div> h1> Добро пожаловать на мой веб-сайт / h1> p> Этот веб-сайт предназначен в основном для предоставления информации о вещах ./p> / div>

  5. Использовать диватег для центрирования других элементов. Если вы хотите центрировать другой элемент, например содержимое между тегами р> / р> а также h2> / h2>), вы вводите div> для этого элемента и / div> после. Поскольку вы уже определили "div.a" как центрирующий код CSS, эти элементы теперь также центрированы.

      стиль> div.a {выравнивание текста: центр; } / style> div> h2> Пожертвования приветствуются / h2> p> please / p> / div>

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

      ! DOCTYPE html> html> body> style> div.a {выравнивание текста: центр; } / style> div> h1> Добро пожаловать на мой веб-сайт / h1> p> Этот веб-сайт в основном предназначен для предоставления информации о вещах. / p> / div> div> h2> Пожертвования приветствуются / h2> p> please / 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>