Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Вертикальное выравнивание в bootstrap 3: множество простых способов. Выбери наилучший для себя

Доброго времени суток всем, кто желает найти то уникальное решение проблемы выравнивания текста. Так как проблем с горизонтальным выравниванием практически не бывает, то текущая статья посвящается разбору темы «Bootstrap вертикальное выравнивание».

Я расскажу, с помощью каких приемов можно выровнять контент по центру и приведу конкретные примеры кода. Поехали!

Способ 1. Нарисовать сетку

Для того чтобы выровнять по вертикали текстовый контент блоков, можно воспользоваться плагином фреймворка Bootstrap 3– Grid. При этом вам также придется вооружиться и свойством padding, которое отвечает за внутренние отступы объектов.

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

Вот такой код необходимо разместить в теге <body>:

1
2
3
4
5
6
7
<div class="container-fluid text-center">
  <div class="row">
    <div class="col-xs-offset-3 col-xs-6 col-xs-offset-3 ">
<p class="main">Здесь расположено очень содержательное предложение! А это второе не менее увлекательное предложение.</p>
    </div>
  </div>
</div>

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

Итак, .row создает строку, а в ней при помощи класса .col- X-Y объявляются колонки, а точнее ячейки. X отвечает за тип экрана, который определяется при помощи одного из четырех встроенных классов.

Я указал класс xs, который отвечает за мобильные устройства. А Y сообщает сколько колонок из общего числа (т.е. 12, так как это максимальное число) выделится под данный блок. Если же вам не нужно заполнять все пространство колонками, как и в моем примере, то можно воспользоваться специальным элементом col- X- offset-Y. Он задает отступы.

Далее прикрепленный ниже код стоит прописать в хедере страницы после скриптов:

1
2
3
4
5
6
<style>
.main {
background-color: orange;
padding: 45px;
}
</style>

Способ 2. Задействовать межстрочный интервал

Если вам необходимо вертикально выровнять только одну строку, например, заголовок, то можно воспользоваться свойством line-height. Он отвечает за интервал между строками.

Почему я сказал только за одну строку? Все просто. Потому что последующие строки будут расположены на расстоянии от предыдущей на указанное число пикселей в этом параметре. В таком случае общий вид элемента будет не самый презентабельный.

В html-разметку вставьте:

1
2
3
4
5
<div class="container-fluid text-center">
  <div class="parent">
     <h1 class="child">Внимание заголовок!</h1>
    </div>
</div>


А в стилях укажите:

.parent { background-color: orange; }

.child {

line-height: 120px;

}

Способ 3. Обратиться за помощью к табличным представлениям

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

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

Давайте разберем подробнее на примере кода. В гипертекстовой разметке я написал:

1
2
3
4
5
<div class="container-fluid">
  <div class="parent">
     <h3 class="child">В этом оранжевом блоке, выступающим в качестве ячейки таблицы, написано очень длинное предложение с двумя запятыми и одним восклицательным знаком!</h3>
    </div>
</div>

Перейдем к стилям.

1
2
3
4
5
6
7
8
9
10
11
.parent { 
background-color: orange;
  width:100%; 
  display: table;
  height:150px;
}
.child {
    display: table-cell;
    text-align:center;
    vertical-align: middle;    
}

Благодаря данному способу реализуется динамическое выравнивание содержимого. Т.е. вы можете изменять значение высоты и при этом текст всегда будет располагаться посредине блока.

Однако есть небольшое НО. Если вам нужно верстать веб-приложение для старых версий Internet Explorer, то такой способ не сработает.

Теперь вы знаете три самых распространенных и наиболее универсальных способа выравнивания контента по вертикали. Однако не останавливайтесь на этом и экспериментируйте. Может быть вы найдете свое решение данной проблемы.

Буду признателен, если вы подпишитесь на обновления моего обучающего блога и расскажите о нем свои знакомым и коллегам. Удачного дня! Пока-пока!

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


Прочитано: 306 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: