Я новичок в twitter bootstrap 3.
Я пытаюсь сделать div по горизонтали и вертикали по центру.
Что я сделал, это -
<!-- Content -->
<div class="container outer_container">
<div class="inner_container">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
<!-- End Content -->
HTML код.
И код CSS -
.outer_container
{
position:absolute !important;
height:100% !important;
width:100% !important;
display: table !important;
}
.inner_container
{
display: table-cell !important;
vertical-align: middle !important;
text-align:center !important;
}
И он дает такой результат - 
Но если я добавлю класс col-sm-4 , то код будет-
HTML-
<!-- Content -->
<div class="container outer_container">
<div class="col-sm-4 inner_container">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
<!-- End Content -->
И CSS остается прежним -
.outer_container
{
position:absolute !important;
height:100% !important;
width:100% !important;
display: table !important;
}
.inner_container
{
display: table-cell !important;
vertical-align: middle !important;
text-align:center !important;
}
Но я получаю такой вывод:
Но я хочу получить такой результат - 
Кто-нибудь может мне помочь, пожалуйста!
Заранее благодарим за помощь.
3 ответа
Чтобы центрировать его по горизонтали, я бы хотел что-то вроде:
<div class="container outer-container">
<div class="row inner-container">
<div class="col-lg-4 col-lg-offset-4">
<!-- Contents... You can change lg for any other size or add more sizes but remember to add the corresponding offset -->
</div>
</div>
</div>
Есть много способов заархивировать это. Однако в вашем случае .col-sm-4 производит 25% своей родительской ширины. Так почему бы просто не увеличить свои .inner_container 25%?
<div class="container">
<div class="row jumbo">
<div class="outer-container">
<div class="inner-container">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
</div>
.jumbo {
display: table;
}
.outer-container {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 500px;
}
.inner-container {
display: inline-block;
width: 25%;
}
См. демонстрацию.
** Примечание: вы объявляете слишком много !important;. Я не думаю, что тебе понадобится так много. Убедитесь, что вы включили bootstrap.css перед основным stylesheet.
Использовать этот-
<!-- Content -->
<div class="container outer_container">
<div class="row-fluid inner_container">
<div class="col-lg-4 col-lg-offset-4">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
<!-- End Content -->