» »

Руководство по центрированию DIV-элемента на CSS

Руководство по центрированию DIV-элемента на CSS

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

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

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

1. Самый популярный способ, который корректно показывает на всех браузерах.

CSS

Код
.zornet_ru_center_div
{
  margin: 0 auto;
  width: 100px;  
}

HTML

Код
<div class="zornet_ru_center_div"></div>

Пример:

Значение auto в margin свойстве устанавливает левое и правое поля в доступное пространство внутри страницы. Здесь нужно помнить, что ваш центральный div должен иметь width свойство.

Старый способ по центрированию DIV внутри DIV-элемента


CSS

Код
.pervui
{
  padding: 29px;
}
.vtoroi
{
  margin: 0 auto;
  width: 100px;  
}

HTML

Код
<div class="pervui"><div class="vtoroi"></div></div>

Второй пример:

Автоматический трюк маржи снова наносит удар. Внешний div может быть беспорядочным, но внутренний div должен иметь width свойство.

Центрируем DIV внутри DIV-элемента с помощью inline-block


CSS

Код
.rintasud
{
  padding: 29px;
  text-align: center;
}
.vetdsakil
{
  display: inline-block;
  padding: 50px;
}

HTML

Код
<div class="rintasud"><div class="vetdsakil"></div></div>

Третий пример:

Свойство text-align работает только на встроенных элементах. Значение inline-block отображает внутренний DIV в качестве встроенного элемента, а также блока, так что text-align свойство во внешнем DIV центров внутреннего DIV.

Центрируем DIV внутри DIV-элемента горизонтально и вертикально


CSS

Код
.zertun
{
  padding: 35px;
  background-color: #ebf746;
}
.gasern
{
  margin: auto;
  width: 109px;
  height: 109px;
  background-color: #152496;
  border-radius: 81px;
}

HTML

Код
<div class="zertun"><div class="gasern"></div></div>

Четвертый пример:

Внутренний div должен иметь свойство width и height свойство. Это не работает, если внешний div имеет фиксированную высоту.

Центрируем DIV по нижней границе страницы


Это использует маржу auto и абсолютный внешний div. Он работает со всеми браузерами.

CSS

Код
.bredsa
{
  position: absolute;
  bottom: 30px;
  width: 100%;
}
.atunig
{
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

HTML
Код
<div class="bredsa"><div class="atunig"></div></div>

Пятый вариант:

Внутренний div должен иметь width свойство. Разрыв со самой нижней части страницы задается в bottom свойстве внешнего div . Вы также можете центрировать div в верхней части страницы, заменив bottom на top свойство.
25.12.2017 Просмотров: 325 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 29.12.2017 02:091
0
Горизонтальное выравнивание легко. Просто используйте свойство text-align . Затем у вас есть стандартные левые, правые, центральные и оправдывающие параметры, которые могут иметь текстовый процессор.

Центрирование по вертикали не так просто и обычно требует, чтобы вы использовали экран: CSS-код таблицы, чтобы браузер принял код вертикального выравнивания. Есть и другие способы сделать это. Некоторые люди добавляют дополнительный элемент div в HTML для использования в качестве разделителя. Некоторые люди используют свойство line-height в CSS. Некоторые люди просто используют таблицу. Я нашел, что это зависит от вашей конкретной страницы, чтобы решить, какой метод вы собираетесь использовать.
avatar