Как сделать выравнивание по центру в HTML и CSS?

Здравствуйте, дорогие друзья!

Сегодня разберёмся как можно сделать в CSS и HTML выравнивание по центру. Мы рассмотрим несколько способов выравнивания текста.

Как выровнять в html текст по центру?

В HTML есть два варианта, которые не предполагают использование CSS.

1. 1.Тег <center>
   Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:
   • текст,
   • картинки,
   • ссылки,
   • а также теги <span>, <strong>, <b>, <gt;, <gt;, <input><select> и некоторые другие.
   PHP

   <center> Текст, который нужно выровнять по центру. </center>

   1 2 3

   <center> Текст, который нужно выровнять по центру. </center>

2. 2.Использование HTML атрибута align cо значением center.
   Этот атрибут нам нужно дописать внутри блочного тега, в котором находится текст, который нам нужно выровнять по центру.
   Это может быть тег <div>, <p>, <h1> <h2>… <h6> <blockquote> <form> <section> и некоторые другие.
   
   PHP

   <h2 align="center">Выравнивание текста по центру при помощи HTML</h2></li>

   1	<h2 align="center">Выравнивание текста по центру при помощи HTML</h2></li>

Так же атрибут align имеет и другие значения:

• align='»left’ — выравнивание текста по левому краю
• align=’right’ – выравнивание по правому краю
• align=’justify’ – выравнивание текста по ширине

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

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

Для этого у нас есть специальное свойство text-align, которое так же имеет несколько значений:

• text-align: center; — для выравнивания по центру
• text-align: left; — по левой стороне
• text-align: right; — по правой стороне
• text-align: justify; — по ширине блока или страницы.

Для того чтобы его применить к нашему тексту можно воспользоваться одним из предложенных вариантов:

1. 1.Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:
   
   PHP

   <div class=”block-text”>Здесь текст</div>

   1	<div class=”block-text”>Здесь текст</div>

   А затем в CSS файле вашего сайта пишем:

   PHP

   .block-text { text-align: center; }

   1 2 3

   .block-text { text-align: center; }

   Вместо block-text может быть любое другое название класса.

   Также можно не присваивать новый класс, а использовать уже существующий. В этой статье с видео инструкцией я показывала как определить класс или идентификатор элемента на сайте: “Как определить ID и класс элемента на странице?”

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

   PHP

   .block p { text-align: center; }

   1 2 3

   .block p { text-align: center; }

   В этом случае выравнивание текста по центру применится для всех тегов

   , которые находятся внутри тега с классом block:

   PHP

   <div class=”block”> <p>Первый абзац</p> <p>Второй абзац</p> …. </div>

   1 2 3 4 5

   <div class=”block”> <p>Первый абзац</p> <p>Второй абзац</p> …. </div>

   Для выравнивания заголовков внутри блока с классом block запись будет немного другая:

   PHP

   .block h1, .block h2, .block h3, .block h4, .block h5, .block h6 { text-align: center; }

   1 2 3

   .block h1, .block h2, .block h3,  .block h4, .block h5, .block h6  { text-align: center; }

   Так же вы можете задать эти CSS свойства в HTML коде страницы или подключить свой отдельный CSS файл. Как это сделать написано в этой статье:
   «Как css подключить к html?»
2. 2.Можно дописать нужные CSS свойства в самом теге при помощи атрибута style:
   
   PHP

   <p style=” text-align: center;”>Пример текста</p>

   1	<p style=” text-align: center;”>Пример текста</p>

   Этот способ, так же как и атрибут align или тег center, удобен только в тех случаях, когда выравнивание нужно сделать в одном или нескольких местах. Для массового выравнивания текста я его не рекомендую использовать.

С уважением Юлия Гусарь