вертикально выровнять DIV в Bootstrap

Я использую Bootstrap 3 и вам нужно по вертикали выровнять div в центр окна браузера (в том числе при изменении размера).вертикально выровнять DIV в Bootstrap

Мой текущий код это ...

<div class="container-liquid"> 
    <div class="row"> 
    <div class="col-md-4"> <img src="img/video-camera.png" alt=""></div> 
    <div class="col-md-4"><img src="img/tablet.png" alt=""></div> 
    <div class="col-md-4"><img src="img/phone.png" alt="" > </div> 
    </div> 
</div>

Любая идея, как я могу вертикально выровнять землеотвода и его элементов в окне broswers? Пробовал много разных подходов, но никто не работал. Я могу использовать JQuery, если это вариант.

Высота самого большого изображения 418px, если это помогает, но я предпочел бы установить образа быть отзывчивым поэтому высота изменится ...

источник

2014-06-29 lowercase

что CSS-код для '.container-liquid'? вы можете сосредоточиться на этом! –

Похоже, вы хотите опирать его на высоту окна для изменения размера. Мой подход заключается в следующем:

CSS:

html, body{ 
height: 100%; 
min-height: 100%; 
} 

.container-liquid{ 
    height: 50%; 
    padding: 25% 0%; 
}

Html

<html> 
<body> 
<div class="container-liquid"> 
    <div class="row"> 
    <div class="col-md-4"> <img src="img/video-camera.png" alt=""></div> 
    <div class="col-md-4"><img src="img/tablet.png" alt=""></div> 
    <div class="col-md-4"><img src="img/phone.png" alt="" > </div> 
    </div> 
</div> 
</body> 

</html>

источник

2014-06-29 17:03:19

Это самое близкое решение до сих пор, но накладывает мой div на 75% вниз по экрану окна, а не на центр ... Я предполагаю, что он добавляет дополнительные 25% к вершине div, который подталкивает его на 25% от вертикального центра , – lowercase

это нормально, просто уменьшите отступ до 15%? Вам придется немного поиграть с этим, потому что я не уверен, есть ли у вас навигация или что-то еще. Также, если это самое близкое решение, верните или отметьте правильно;) –

да 15% сделал трюк. Спасибо за вашу помощь! – lowercase

вот скрипка: http://jsfiddle.net/boatrokr/3bH45/1/

JQuery является требуется - не правильно читал вопрос

var blockTop = $('.container-liquid').height()/2 - $('.vertical-center-block').height(); 
$('.vertical-center-block').css('top', blockTop);

источник

2014-06-29 16:37:34

сфокусировано? снова проверьте скрипку –

@AminJafari прочитал q не так - обратился к нему –

Требуется фиксированная высота для .container-liquid, которая исключает любую отзывчивость, которую я установил для изображений. требуется решение без фиксированной высоты. Я также не могу заставить его работать. можете ли вы написать команду jquery точно, как она должна идти в моем html, поэтому я проверяю, пожалуйста? – lowercase

вертикально выровнять DIV в Bootstrap

ответ

Смежные вопросы