Как центрировать выравнивание по вертикали контейнера в bootstrap
Я ищу способ вертикально выровнять центр container
div внутри тега jumbotron
и установить его в центре страницы.
The .jumbotron
должен быть адаптирован к полной высоте и ширине экрана, поэтому я использовал этот CSS.
.jumbotron{
heght:100%;
width:100%;
}
The .container
div имеет ширину 1025px
и должно быть в середине страницы (вертикально по центру).
.container{
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
мой HTML похож на
<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>
поэтому я хочу, чтобы эта страница имела jumbotron приспособлено к высоте и ширине экрана вместе с центром контейнера вертикально к jumbotron. Как я могу достичь этого?
7 ответов
гибкий путь окно
вертикальное выравнивание теперь очень просто с помощью гибкая компоновка коробки. В настоящее время этот метод поддерживается в широкий ассортимент веб-браузеров, кроме Internet Explorer 8 & 9. Поэтому нам нужно использовать некоторые хаки/polyfills или разные подходы для IE8/9.
в следующем я покажу вам, как это сделать только в 3 строк of текст (независимо от старого синтаксиса flexbox).
Примечание: лучше использовать дополнительный класс вместо изменения .jumbotron
для достижения вертикального выравнивания. Я использую vertical-center
имя класса, например.
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
важно Примечания (рассматривается в demo):
A процент значения
height
илиmin-height
свойства относительноheight
родительского элемента, поэтому вы должны указатьheight
родителя явно.синтаксис поставщика с префиксом / old flexbox опущен в опубликованном фрагменте из-за краткости, но существует в онлайн-примере.
в некоторых старых веб-браузерах, таких как Firefox 9 (в котором Я проверил), гибкий контейнер -
.vertical-center
в этом случае-не будет занимать доступное пространство внутри родителя, поэтому нам нужно указатьwidth
свойства:width: 100%
.также в некоторых веб-браузерах, как упоминалось выше, элемент flex -
.container
в этом случае - может не отображаться в центре по горизонтали. Кажется, применяется влево / вправоmargin
ofauto
не оказывает никакого влияния на элемент flex.
Поэтому нам нужно выровнять его поbox-pack / justify-content
.
для получения дополнительной информации и/или вертикального выравнивания столбцов, вы можете обратиться к теме ниже:
традиционный способ для устаревших веб-браузеров
это старый ответ, который я написал в то время, когда я ответил на этот вопрос. Этот метод обсуждался здесь и он должен работать в Internet Explorer 8 и 9, а также. Объясню коротко:
в встроенном потоке встроенный элемент уровня может быть выровнен по вертикали к середине vertical-align: middle
декларации. Спецификации от W3C по:
средний
Выровняйте вертикальную середину коробки с базовой родительского окна плюс половина высоты родителя.
в случаях, когда родитель -.vertical-center
элемент в этот случай-имеет явное height
, случайно, если бы мы могли иметь дочерний элемент, имеющий точно такой же height
родителя, мы могли бы для перемещения базовой линии родителя до середины полного роста ребенка и удивительно сделать наш желаемый ребенок в потоке -.container
выравнивание по центру по вертикали.
становится все вместе
это, как говорится, мы могли бы создать полноразмерный элемент в .vertical-center
by ::before
или ::after
псевдо элементы, а также изменить по умолчанию display
тип его и другого ребенка,.container
to inline-block
.
затем использовать vertical-align: middle;
для выравнивания встроенных элементов по вертикали.
вот, пожалуйста:
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
кроме того, чтобы предотвратить непредвиденные проблемы на дополнительных небольших экранах, вы можете сбросить высоту псевдо-элемента до auto
или 0
или изменить его display
тип none
при необходимости так:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
и еще:
если есть footer
/header
разделы вокруг контейнера, лучше правильно расположить эти элементы (relative
, absolute
? вам решать.) и добавить выше z-index
значение (для гарантии), чтобы держать их всегда на вершине других.
добавить файл Bootstrap.css затем добавьте это в свой css
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
Now call in your page
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
обновить 2018
Bootstrap 4 включает flexbox, поэтому метод вертикального центрирования намного проще и не требует дополнительного CSS.
просто использовать d-flex
и align-items-center
служебные классы..
<div class="jumbotron d-flex align-items-center">
<div class="container">
content
</div>
</div>
на Bootstrap 4:
to центр ребенка по горизонтали, используйте bootstrap-4 класс:
justify-content-center
to центр ребенка вертикально, используйте bootstrap-4 класс:
align-items-center
но помните, не забывайте использовать д-флекс класс с этими это служебный класс bootstrap-4, например
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Примечание: сделать обязательно добавьте утилиты bootstrap-4, если этот код не работает
Я знаю, что это не прямой ответ на этот вопрос, но это может помочь кому-то
моя любимая техника:
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
демо
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-md-5 iPhone-features">
<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>
см. также эта скрипка!
протестировано в IE, Firfox и Chrome.
CSS:
.parent-container {
position: relative;
height:100%;
width: 100%;
}
.child-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML-код:
<div class="parent-container">
<div class="child-container">
<h2>Header Text</h2>
<span>Some Text</span>
</div>
</div>
найдено на https://css-tricks.com/centering-css-complete-guide/
вот как я использую для выравнивания контента по вертикали-сверху / по центру / снизу с помощью bootstrap 3 строки:
вот скрипка демо: в JS скрипку
Bootstrap 3 columns with same height and vertically aligned -
/* columns of same height styles */
.row-full-height {
height: 100%;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
.row-same-height {
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
@media (min-width: 768px) {
.col-sm-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 992px) {
.col-md-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 1200px) {
.col-lg-height {
display: table-cell;
float: none !important;
}
}
/* vertical alignment styles */
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
<div class="container">
<h2>Demo 1</h2>
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
<div class="col-xs-3 col-xs-height col-top">2st column</div>
<div class="col-xs-3 col-xs-height col-middle">3st column</div>
<div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
</div>
</div><!-- ./row -->
</div><!-- ./container -->