Как выровнять текст по центру на веб-странице с помощью CSS
Программирование

Как выровнять текст по центру на веб-странице с помощью CSS

Заставьте ваши HTML-элементы выровняться по центру с помощью этих правил CSS

Если вы новичок в разработке внешних интерфейсов, несоответствие между тем, что выдает обычный HTML-документ в вашем браузере, и тем, как выглядит современный сайт, может показаться очень пугающим

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

В этой обучающей статье вы узнаете, как выровнять текст по центру на веб-страницах с помощью CSS

Что такое свойство CSS Text-Align?

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

Похожие: Выравнивание текста с помощью свойства CSS Text Align

  • Left (выравнивает текст по левому краю веб-страницы, а также является выравниванием по умолчанию).
  • Справа (выравнивает текст по правому краю веб-страницы).
  • Центр (выравнивание текста по центру веб-страницы).
  • Justify (обеспечивает одинаковую ширину каждой строки текста).

Выравнивание текста по центру на веб-странице

Учитывая, что большинство языков читается слева направо, выравнивание текста по левому краю веб-страницы по умолчанию является практичным. Однако бывают случаи, когда выравнивание текста по центру является более практичным подходом (например, заголовки и подзаголовки)

Пример простой веб-страницы HTML


<!DOCTYPEhtml>

<htmllang'en'>

<head>

   <metaname'viewport'content'width=device-width, initial-scale=1. 0'>

   <title>Center Alignment</title>

</head>

<body>

   <divclass'container'>

       <divid'box-1'>

           <h1>Heading</h1>

           <h3>Lorem ipsum, dolor sit amet consectetur adipisicing</h3>

           <>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,.

               repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt.

               commodi ad fugit soluta provident dolorem distinctio?.

               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,.

               repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt.

               commodi ad fugit soluta provident dolorem distinctio?</>

       </div>

       <divid'box-2'>

           <h1>Heading</h1>

           <h3>Lorem ipsum, dolor sit amet consectetur adipisicing</h3>

           <>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,.

               repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt.

               commodi ad fugit soluta provident dolorem distinctio?.

               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,.

               repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt.

               commodi ad fugit soluta provident dolorem distinctio?</>

       </div>

   </div>

</body>

</html>

Приведенный выше HTML-файл создаст в вашем браузере следующую веб-страницу

Как видно из приведенного выше результата, весь текст выровнен по левому краю. Существует несколько методов, которые можно использовать для выравнивания текста по центру, но сначала нужно определить, какой текст нужно выровнять по центру

Если целью является выравнивание по центру всего текста на вашей веб-странице, то следующий код выполнит эту задачу

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


      .container

           text-aligncenter

       }

В приведенном выше коде CSS используется свойство class для выделения всего текста на веб-странице, и это возможно только потому, что существует родительский тег <div> с классом container, заключающий весь текст на веб-странице. Код приведет к следующему выводу в браузере

Как видите, весь текст на веб-странице теперь выровнен по центру. Единственная проблема заключается в том, что абзац выглядел бы лучше и был более читабельным, если бы был выровнен по левому краю. В случаях, когда необходимо выровнять по центру только часть текста на веб-странице, можно использовать элементы HTML в качестве селекторов вместо классов и идентификаторов

Похожие: Как выделить часть веб-страницы с помощью селекторов CSS

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


   h1h3

           text-aligncenter

       }.

Приведенный выше код нацелен только на элементы h1 и h3 на веб-странице, и в браузере будет выведен следующий результат

Выравнивание по центру Div на веб-странице

Еще одна тенденция, которую вы можете заметить на современных сайтах, – это то, что текст не доходит до краев. Это один из случаев, когда используется родительский div. Хотя в CSS нет свойства div align, свойство margin можно использовать для выравнивания по центру родительского div и его содержимого

Пример выравнивания div по центру


  .container

           max-width: 920px

           marginauto

       }

Приведенный выше код выполняет несколько действий. Во-первых, он присваивает ширину всему содержимому веб-страницы, используя класс родительского div. Вы всегда должны использовать свойство max-width вместо свойства width при размещении содержимого сайта в контейнерах, поскольку это облегчает отзывчивость, определяя максимальную ширину вместо фиксированной

Приведенный выше код также использует свойство margin для размещения родительского div в центре веб-страницы, в результате чего браузер выдает следующее изображение

Как видно из изображения выше, ширина текста уменьшилась до 920px, а невидимый контейнер, заключающий текст, теперь находится в центре веб-страницы благодаря свойству margin

Как работает свойство Margin?

Свойству margin можно присвоить комбинацию из трех различных значений. Если свойству CSS присвоено четыре значения, каждое из них будет указывать на одну из четырех сторон элемента HTML

Когда свойству margin присваивается два значения, первое значение будет предназначено для верхней и нижней сторон элемента HTML, а второе – для левой и правой сторон элемента HTML

В приведенном выше примере свойству margin присвоено только одно значение, что означает, что оно нацелено на левую и правую стороны HTML-элемента (который в данном случае является родительским тегом <div> )

Свойству margin обычно присваиваются значения в единицах пикселей или, как в приведенном выше примере, значение auto. Значение auto гарантирует, что отступы, используемые по обе стороны HTML-элемента, равны. Это эффективно размещает родительский элемент div (и, соответственно, текст) в центре веб-страницы, обеспечивая макет, отражающий современные веб-страницы

Что вы можете сделать сейчас

Эта обучающая статья научит вас нескольким вещам:

  • Как использовать свойство text-align для центрирования текста на веб-странице.
  • Как выравнивать по центру различные группы текстов, заключенные в теги <div> или другие элементы HTML.
  • Как выровнять группу текстов по центру с помощью свойства margin родительского div.

Однако это лишь вершина айсберга в отношении инструментов CSS, которые можно использовать для организации макета вашего сайта. Одним из самых популярных свойств CSS, которое можно использовать для создания особой структурной схемы веб-страницы (включая выравнивание текста по центру), является CSS Grid

CSS Grid обеспечивает двухмерную (строки и столбцы) структуру компоновки для ваших веб-страниц, с легкой для изучения и использования структурой

Об авторе

Алексей Белоусов

Привет, меня зовут Филипп. Я фрилансер энтузиаст . В свободное время занимаюсь переводом статей и пишу о потребительских технологиях для широкого круга изданий , не переставая питать большую страсть ко всему мобильному =)

Комментировать

Оставить комментарий