Center text align css: CSS Layout — Horizontal & Vertical Align

Leave a Comment / Css / By /

Содержание

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

Обновлено: 01.05.2023 автором Computer Hope

Центрирование текста обычно используется для заголовка веб-сайта или документа. Чтобы центрировать текст с помощью HTML, вы можете использовать тег

или использовать свойство CSS. Чтобы продолжить, выберите нужный вариант и следуйте инструкциям.

  • Использование тегов
    .
  • Использование свойства таблицы стилей.
  • Примеры выравнивания текста и объектов по центру.

Использование тегов

Один из способов центрировать текст или поместить его в середину страницы — заключить его в теги

.

 
Отцентрировать этот текст!

Использование приведенного выше примера HTML-кода дает следующий результат:

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

Примечание

Тег

теперь считается устаревшим. Хотя он все еще может работать, ожидается, что он будет удален в пользу использования CSS. Мы рекомендуем вам использовать метод таблицы стилей (показанный ниже) для центрирования текста в HTML.

Использование свойства таблицы стилей

Вы можете центрировать текст на веб-сайте с помощью CSS, указав свойство text-align элемента, который должен быть центрирован.

Центрирование нескольких блоков текста

Если у вас есть только один или несколько блоков текста по центру, добавьте атрибут стиля к открывающему тегу элемента и используйте свойство text-align. В приведенном ниже примере мы добавили атрибут и свойство к тегу

.

 
Отцентрируйте этот текст!

Для свойства text-align установлено значение center, чтобы указать, что элемент расположен по центру в середине страницы или содержит div.

Несколько блоков текста

Если у вас много блоков текста для центрирования, используйте CSS внутри тегов в заголовке или во внешней таблице стилей.

См. приведенный ниже пример кода, как настроить центрирование всего текста в тегах

.

 <стиль>
п {
 выравнивание текста: по центру
}

Текст каждого набора тегов

располагается по центру страницы. Если вы хотите, чтобы некоторые абзацы были центрированы, а другие нет, вы можете создать класс стиля, как показано в приведенном ниже коде.

 <стиль>
.центр {
 выравнивание текста: по центру
}

Если вы создаете центральный класс, как показано в приведенном выше примере, абзац можно центрировать с помощью приведенного ниже кода, который «вызывает» центральный класс.

 
Отцентрируйте этот текст!

Кончик

После создания класса его можно применить к любому тегу HTML, содержащему слова, изображения и большинство других объектов. Например, если вы хотите, чтобы заголовок располагался по центру, вы можете добавить

class=»center» к тегу

или другому тегу заголовка.

Примеры выравнивания текста и объектов по центру

Ниже приведены примеры использования атрибута стиля и свойства text-align для центрирования текста и объектов на веб-странице.

Центрирование текста в абзаце

HTML-код:

Пример выравнивания текста по центру в абзаце.

Результат:

Пример выравнивания текста по центру в абзаце.

Центрирование изображения

Код HTML:

Компьютерная надежда

Результат:

Центрирование гиперссылки URL

Код HTML:

домашняя страница Computer Hope

Результат:

Домашняя страница Computer Hope

Центрирование текста в теге заголовка

Код HTML:

Пример выравнивания текста по центру в теге заголовка

Результат:

Пример выравнивания текста по центру в теге заголовка

Центрирование текста в теге

Код HTML:


 

Пример предложения по центру в теге div.


 

Пример второго предложения по центру в теге div.


Результат:

Пример предложения по центру в теге div.

Пример второго предложения по центру в теге div.

  • Как центрировать изображение на веб-странице с помощью HTML.
  • Как изменить тип, размер и цвет шрифта на веб-странице.
  • Дополнительную информацию и соответствующие ссылки см. в определении центра.
  • Помощь и поддержка HTML и веб-дизайна.

Fix text-align center не работает Проблема в CSS

В CSS свойство text-align используется для установки горизонтального выравнивания текста в элементе HTML. Он может выровнять текст по горизонтали слева, по центру или справа внутри элемента в зависимости от ваших требований.

Первоначально свойство text-align было разработано для выравнивания текста внутри элементов, но часто мы используем его для выравнивания (особенно центрирования) нескольких элементов HTML, таких как кнопки, изображения, интервалы и т. д.

Однако, когда мы пытаемся центрировать элементы или текст с помощью text-align: center; иногда работает иногда нет.

Может быть несколько причин, по которым text-align: center; вам не подходит. Решение зависит от того, чего вы пытаетесь достичь с его помощью.

Давайте рассмотрим некоторые распространенные вещи, которые вы можете делать неправильно при применении text-align: center; к элементу:

Причины, по которым центр выравнивания текста не работает

При применении text-align: center; к элементу, первое, что вы должны иметь в виду, это то, что он будет выравнивать текст (или содержимое) элемента по центру, только если элемент является элементом уровня блока, таким как div, абзац, список и т. д.

Если элемент является встроенным элементом, таким как диапазон, кнопка, изображение, ссылка и т. д., и вы пытаетесь центрировать их текст или пытаетесь выровнять по центру такие элементы с помощью text-align: center, , это может не сработать .

Итак, когда text-align: center; не работает, вы должны сначала посмотреть на следующие возможные вещи, которые вы можете делать неправильно:

  • Вы применяете text-align: center; к встроенному элементу (кнопка, изображение, ссылка и т. д.)
  • Вы пытаетесь выровнять по центру текст блочного элемента, но элементу не хватает ширины
  • Вы пытаетесь выровнять по центру блочный уровень элемент с text-align: center;
  • Элемент имеет поплавок свойство
  • Элемент имеет положение: фиксированное; или позиция: абсолютная;

Скорее всего, вы пытаетесь выровнять по центру встроенный элемент (кнопку, img, span, ссылку и т. д.) с помощью text-align: center; свойство.

Давайте по порядку рассмотрим решения каждой проблемы, перечисленной выше.

Быстрое решение для устранения проблемы с неработающим центром выравнивания текста в CSS

Как мы обсуждали в предыдущем разделе, свойство text-align выравнивает текст или содержимое только тех элементов HTML, которые имеют тип block, таких как div, p, li и т. д.

Но если вы попытаетесь применить

text-align: center; для встроенных элементов, таких как кнопка, ссылка, span, img и т. д., это не сработает.

Итак, чтобы выровнять такие элементы по центру, используйте text-align: center; , вы должны обернуть их в блочный элемент, такой как div, а затем применить text-align: center; на самой оболочке (div), а не на встроенном элементе.

Например, если мы хотим выровнять кнопку по центру, мы должны сначала обернуть ее внутри элемента div , а затем применить text-align: center; на самом div.

  <дел>

Теперь примените text-align: center; на элементе-обертке (div здесь):

 div{
    выравнивание текста: по центру; /* Содержимое по центру */
    граница: сплошной коралл 2px;
    отступ: 20 пикселей 10 пикселей;
}

Пример вывода:

После запуска приведенного выше кода вы получите следующий вывод:

Как видно из приведенного выше вывода, после применения text-align: center; в теме.

Если вы попробовали вышеуказанное решение, и оно сработало для вас, это здорово, если нет, продолжайте читать, мы предоставим вам решение для каждой отдельной проблемы, с которой вы сталкиваетесь.

Решение для центра выравнивания текста, не работающего на Span

Применение выравнивание текста: по центру; непосредственно в элементе span не будет работать, потому что является встроенным элементом.

Такие элементы не начинаются с новой строки и занимают ровно столько ширины, сколько необходимо для размещения их содержимого.

Итак, если вы хотите выровнять по центру текст элемента span , вы должны явно сделать его блочным, установив для его свойства display значение block , а затем применить text-align: center; на нем.

  Это какой-то фиктивный текст

Добавьте CSS:

  span{
    дисплей: блок; /* Сделать блочный тип */
    выравнивание текста: по центру; /* Выравнивание текста по центру */
    граница: 2px сплошной малиновый;
    отступ: 20 пикселей;
}

Пример вывода:

Как видно из приведенного выше вывода, текст диапазона выровнен по центру.

Если вы хотите выровнять по центру весь элемент span, а не только текст, вы должны обернуть его внутри блочного элемента, такого как div , а затем примените text-align: center; на самом div.

 
 <дел>
     Это какой-то фиктивный текст

Добавьте CSS:

 div{
    выравнивание текста: по центру; /* Центрируем его содержимое */
    отступ: 20 пикселей;
    граница: 2px сплошной малиновый;
}
охватывать{
    цвет фона: желтый;
}

Вывод:

Решение для центра выравнивания текста, не работающего с изображением

Как и промежутки, изображения также являются встроенными элементами. Таким образом, применяя выравнивание текста: по центру; на изображениях не будет тянуть их к центру родителя.

Если вы хотите выровнять изображения по центру с помощью

text-align: center; , вы должны поместить их в блочный элемент, такой как div, а затем применить text-align: center; на самом div.

 <дел>

Добавьте CSS:

 div{
    выравнивание текста: по центру; /* Центрируем его содержимое */
    граница: 2px сплошной малиновый;
    отступ: 20 пикселей;
}

Решение для центра выравнивания текста, не работающего с кнопками, ссылками, элементами ввода и другими встроенными элементами

Так как кнопки, ссылки, элементы ввода, изображения и т.

д. являются HTML-элементами встроенного уровня. Поэтому, если вы попытаетесь выровнять такие элементы по центру с помощью text-align: center; собственности, это не сработает.

Для выравнивания таких элементов по центру с помощью text-align: center; , вы должны обернуть их в любой блочный элемент, такой как div, а затем применить text-align: center; на самом div. Это автоматически подтянет встроенные элементы к центру их родителя.

 <дел>
    Это ссылка

Добавьте CSS:

 div{
    выравнивание текста: по центру; /* Центрируем его содержимое */
    отступ: 20 пикселей;
    граница: 2px сплошной малиновый;
}

Вывод:

Решение для выравнивания текста по центру не работает на гибком дисплее

Если элемент, к которому вы применяете text-align: center; — это гибкий контейнер, т. е. вы установили для свойства display значение flex , text-align: center; может не работать.

В таких случаях для выравнивания по центру текста (содержимого) таких элементов вы можете вместо этого использовать свойство justify-content модуля flexbox.

Свойство justify-content используется для горизонтального выравнивания элементов гибкого контейнера. Чтобы выровнять элементы таких элементов по центру, вы можете просто установить свойство выравнивания содержимого в центр .

 <дел>
    Это какой-то фиктивный текст.