Bootstrap блок по центру

Горизонтальное центрирования

Начнем с самого простого – горизонтального выравнивания контента. Для этого во фреймворке были предусмотрены специальные встроенные классы, благодаря которым можно указывать тип выравнивания объектов. Все они перечислены в таблице, прикрепленной ниже.

Класс Тип размещения
.text-left Все элементы ровняются по левому краю.
.text-right Весь контент выравнивается по правому боку.
.text-center Содержимое сайта располагается по центру веб-страницы.
.text-justify Выравнивание производится по ширине контейнера или блока.
.text-nowrap Все объекты сервиса распределяются без отступов.

Для сравнения работы названных классов выполните пример.

Также существуют и другие элементы для описываемого вида выравнивания. Это pull-left и pull-right. Их работу можно сравнить со свойством float в каскадных таблицах стилей css.

Помимо этого, можно воспользоваться знакомой вам системой сеток. Эта технология очень гибкая и востребованная. Так что думаю вы уже знакомы с ней (если нет, то можете прочитать соответствующие статьи на моем блоге). Используя ее, у разработчика появляется возможность без лишних усилий располагать текст, видео, img внутри колонок с любой стороны.

Вертикальное центрирование

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

Grid System и padding

Начну с очевидного – Grid System и указание внутренних отступов. Это наиболее простой и легкий способ решения вертикального центрирования информации. Таким образом выравнивать можно предложения, видео и фото. Для лучшего понимания проанализируйте пример. В нем я создал блок посреди страницы и выровнял его содержимое.

А теперь добавьте в хедере документа описание стилей css:

.main {

background-color: #A52A2A;

padding: 35px;

}

Табличное представление

Второй популярный вариант центрирования по вертикали – это использование табличных представлений. Только не думайте, что я предлагаю вам сейчас создать простую таблицу и внести в нее информацию! Данный механизм достигается при помощи свойств стилевых таблиц.

Для этого вам нужно родительскому элементу прописать тип отображения display: table. А дочерние объекты поместить в ячейки этой таблицы, т.е. указать им значение одноименного свойства равным table- cell. И теперь после проделанных махинаций появляется возможность использовать такой параметр, как vertical-align. Пропишите его вместе со значением «middle».

Итак, код внутри тега <body> будет выглядеть следующим образом:

А для стилевого оформления укажите:

Редактирование отображения навигации

И напоследок, как и обещал, разберем, как перемещать панель меню.

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

Однако бывают такие ситуации, когда вкладки меню находятся под, к примеру, баннером. Для этого изначально создают разметку рекламы, а после вставляют код навигации. Таким образом, вы можете разместить Navbar в любом месте веб-страницы.

Другой вариант – использование внешних (margin) и внутренних (padding) отступов.

Однако есть и встроенные классы выравнивания описываемого объекта. Это .navbar-fixed-top и .navbar-fixed-bottom, которые закрепляют навигационный блок сверху или снизу страницы соответственно. А также есть класс .navbar-right, который выравнивает пункты меню по правой стороне. Напомню, что по умолчанию они размещаются слева.

Спасибо за ваше внимание. Если вам понравилась публикация, то подписывайтесь на обновления моего блога и рассказывайте о нем друзьям. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 494 раз

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *