Руководство по центрированию 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-blockCSS Код .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 свойство. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
