Меню
Спросить
*.{ }

Центрирование в css

25 января 2017
Центрирование в css

Всем привет. На улице теплеет, но зима еще покажет свое, третий день идет снег. Знаете, эта атмосфера, легкий и плавный полет снега, плюс теплая погода, на улице не так людно, в душе в такие моменты остается приятный комочек счастья. Ну а мы, продолжаем изучать сайтостроение и сегодня узнаем, как можно выровнять текст по середине, как можно выровнять текст по центру, как выровнять элемент html по середине или центру.
И так, поехали =)

Как выровнять текст по середине

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

Текст по середине

Для выравнивания текста по середине используем всего одно свойство, прописываем его родителю

  1. .родитель { text-align:center; }

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

Ранее я писал статью о том, как можно выравниваться текст в html с помощью стилей css, но там я ни слова не указал про центрирование текста в html. И так берем то же текст, но теперь уже не посередине, а по центру, для этого к существующему, выше описанному, свойству добавляем еще одно и получаем текст по центру.

Текст по центру

Для центрирования текста, используем два свойства.

  1. .родитель {
  2. text-align:center;
  3. line-height:400px;
  4. }

Теперь поясню. Свойство "высота линии"(line-height) у меня стоит с параметром в 400px, почему 400? Четыресто - это высота родителя текста, в моем случае, в вашем случае это может быть какой угодно размер. Так вот если высота вашего родителя к примеру тысяча пикселей, то и высоту линии(line-height) вы должны указать в тысячу пикселей, тогда ваш текст встанет ровно по центру.
Еще один момент, если это не помогло, то скорей всего, у вас стоит другое вертикальное выравнивание по умолчанию или же вы сами где выше могли поставить, для этого добавьте третье свойство, чтобы все получилось.

  1. .родитель {
  2. text-align:center;
  3. line-height:400px;
  4. vertical-align:middle; /*Вертикальное выравнивание*/
  5. }

Как выровнять элемент html по середине

И так, с текстом разобрались теперь возьмем случай, когда нужно например, расположить блок html по середине родителя.

Элемент html по середине

Этот зеленый квадратик сейчас расположен по середине родителя, чтобы добиться такого вида можно использовать несколько способов:

Способ 1
Для этого, мы представим родителю(красный квадрат), что его дочерний элемент(зеленый квадрат) не является блоком, а является строчный элементом, но так будет казаться только родителю, и так добавляем свойство дочернему элементу:

  1. зеленый квадрат {
  2. display: inline-block;
  3. }

Отлично, теперь родителю нужно лишь добавить знакомое нам свойство:

  1. красный квадрат {
  2. text-align: center;
  3. }

Поехали дальше.

Способ 2
Если тебе не подошел первый способ, то смело воспользуйся вторым способом. Для этого, добавь лишь одном свойство дочернему элементу(зеленый квадрат), при условии, что он не прижат к какому-либо краю, а то есть не используется свойство FLOAT:

  1. зеленый квадрат {
  2. margin: 0 auto;
  3. }

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

  1. зеленый квадрат {
  2. float: none;
  3. margin: 0 auto;
  4. }

В некоторых случаях float необходим, иначе, к примеру, автоматическая длина элемента обнуляется, но не волнуйся, ведь всегда есть выход.

  1. зеленый квадрат {
  2. float: none;
  3. margin: 0 auto;
  4. overflow: auto;
  5. }

Как выровнять элемент html по центру

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

Элемент html по центру

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

  1. красный квадрат {
  2. text-align: center;
  3. }

  4. зеленый квадрат {
  5. display: inline-block;
  6. }

Отлично, наш блок встал на середину элемента, теперь добавим парочку свойств.

  1. красный квадрат {
  2. text-align: center;
  3. line-height: 400px;
  4. }

  5. зеленый квадрат {
  6. display: inline-block;
  7. vertical-align: middle;
  8. }

Способ 2
Второй способ подразумевает, использование flex-блока, это довольно молодой вид блоков, с его приходом и появился более новый способ центрирования элементов в html, и да, мне это нравится черт возьми.

Для этого, возвращаем исходный вид наших элементов и добавляем новые свойства.

  1. красный квадрат {
  2. display: flex;
  3. align-items: center;
  4. }

  5. зеленый квадрат {
  6. margin: 0 auto;
  7. }

Это все, что нужно, чтобы элемент встал в точку центра родителя =)

Заключение

Всем спасибо за внимание, если что упустил пишите в комменты, буду добавлять новые способы центрирования элементов в html.
Пока  =)

Следующая статьяПредыдущая статья