Я ищу способ вертикального container
центрирования div внутри jumbotron
и установки его в середине страницы.
Он .jumbotron
должен быть адаптирован к полной высоте и ширине экрана. .container
DIV имеет ширину 1025px
и должен быть в середине страницы ( по вертикали в центре).
Я хочу, чтобы на этой странице был адаптирован jumbotron к высоте и ширине экрана вместе с контейнером, вертикально центрированным по отношению к jumbotron. Как мне этого добиться?
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
Ответы:
Гибкий коробочный способ
Выравнивание по вертикали теперь очень просто благодаря использованию гибкого макета коробки . В настоящее время этот метод поддерживается в широком диапазоне веб - браузеров , за исключением Internet Explorer 8 и 9. Поэтому мы должны были бы использовать некоторые хаки / polyfills или различные подходы для IE8 / 9.
Далее я покажу вам, как это сделать всего в 3 строках текста (независимо от старого синтаксиса flexbox) .
Примечание: лучше использовать дополнительный класс вместо изменения
.jumbotron
для достижения вертикального выравнивания. Я бы использовалvertical-center
имя класса, например.Пример здесь ( Зеркало на jsbin) .
Важные замечания (рассмотрено в демоверсии) :
А процентные значения
height
илиmin-height
свойства относительно кheight
родительскому элементу, поэтому вы должны указатьheight
родитель в явном виде.Префикс поставщика / старый синтаксис flexbox пропущен в опубликованном фрагменте из-за краткости, но существует в онлайн-примере.
В некоторых старых веб - браузеры , такие как Firefox 9 (в котором я проверил) , гибкий контейнер -
.vertical-center
в данном случае - не будет брать доступное пространство внутри родителя, поэтому необходимо указатьwidth
свойство , как:width: 100%
.Также в некоторых веб-браузерах, как упоминалось выше, гибкий элемент -
.container
в данном случае - может не отображаться в центре по горизонтали. Кажется , приложенной влево / вправоmargin
отauto
не оказывает никакого влияния на гибком пункте.Поэтому нам нужно выровнять его
box-pack / justify-content
.Для получения дополнительной информации и / или вертикального выравнивания столбцов, вы можете обратиться к теме ниже:
Традиционный способ для устаревших веб-браузеров
Это старый ответ, который я написал, когда ответил на этот вопрос. Этот метод обсуждался здесь, и он должен работать в Internet Explorer 8 и 9. Я объясню это вкратце:
Во встроенном потоке встроенный элемент уровня может быть выровнен вертикально к середине
vertical-align: middle
объявлением. Спекуляция от W3C :В тех случаях, когда родительский
.vertical-center
элемент - в данном случае - имеет явныйheight
, случайно, если бы у нас мог быть дочерний элемент, имеющий точно такой жеheight
родительский элемент , мы могли бы переместить базовую линию родительского элемента в среднюю точку полного - ребенок высотой и, что удивительно, делает желаемого ребенка в потоке -.container
выровненным по центру по вертикали.Собираем все вместе
При этом мы могли бы создать элемент полной высоты внутри элементов
.vertical-center
by::before
или::after
pseudo, а также изменитьdisplay
тип по умолчанию для него и другого дочернего элемента -.container
toinline-block
.Затем используйте
vertical-align: middle;
для выравнивания встроенных элементов по вертикали.Ну вот:
РАБОЧАЯ ДЕМО .
Кроме того , чтобы предотвратить неожиданные проблемы в дополнительных небольших экранах, вы можете сбросить высоту псевдо-элемент
auto
или0
или изменить егоdisplay
тип , чтобы вnone
случае необходимости так:ОБНОВЛЕНО ДЕМО
И вот еще:
Если есть
footer
/header
участки вокруг контейнера, то лучше положение , что элементы должным образом (relative
,absolute
? До вас.) И добавить более высокоеz-index
значение (для обеспечения) , чтобы держать их всегда на вершине других.источник
display: flex
к a.container
, это заставляет ребенка.row
вспыхивать. Похоже, что путь flexbox потребовал бы от нас отказаться от некоторых основных функций начальной загрузки?Обновление 2019
Bootstrap 4 включает в себя flexbox, поэтому метод вертикального центрирования намного проще и не требует дополнительного CSS .
Просто используйте
d-flex
иalign-items-center
полезные классы ..http://www.codeply.com/go/ui6ABmMTLv
Важно: вертикальное центрирование относительно высоты . Родительский контейнер элементов, которые вы пытаетесь центрировать, должен иметь определенную высоту . Если вы хотите высоту страницы используйте
vh-100
илиmin-vh-100
на родительском! Например:См. Также: Центр вертикального выравнивания в Bootstrap 4
источник
добавь Bootstrap.css и добавь это в свой css
источник
В Bootstrap 4 :
чтобы отцентрировать ребенка по горизонтали , используйте класс bootstrap-4:
чтобы центрировать ребенка по вертикали , используйте класс bootstrap-4:
но помните, не забывайте использовать класс d-flex с этим, это служебный класс bootstrap-4, вот так
Примечание: обязательно добавьте утилиты bootstrap-4, если этот код не работает
Я знаю, что это не прямой ответ на этот вопрос, но это может помочь кому-то
источник
Моя предпочтительная техника:
демонстрация
Смотрите также эту скрипку !
источник
Протестировано в IE, Firefox и Chrome.
Найдено на https://css-tricks.com/centering-css-complete-guide/
источник
для bootstrap4 вертикальный центр из нескольких предметов
d-flex для правил flex
flex-column для вертикального направления на предметах
justify-content-center для центрирования
style = 'height: 300px;' должен иметь для заданных точек, где центр будет рассчитываться или использовать класс H-100
тогда для горизонтального центра div d-flex justify-content-center и некоторый контейнер
Итак, у нас есть иерархия из 3 тегов: div-column -> div-row -> div-container
источник
Если вы используете Bootstrap 4, вам просто нужно добавить 2 div:
Классы: d-table, d-table-cell, w-100, h-100 и align-middle сделают эту работу
источник
Дайте контейнер класса
Дайте div, который находится внутри контейнера:
Весь контент внутри этого div будет отображаться в середине страницы.
источник
Вот способ, которым я пользуюсь для выравнивания контента по вертикали - верх / центр / низ с начальной загрузкой 3 ряда. Начальная загрузка 3 столбца одинаковой высоты и выровнены по вертикали.
Вот демоверсия JSFiddle .
источник