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

Question

У меня есть куча изображений в моем приложении для загрузки.

Я пытаюсь получить их вертикально, как это:

Это то, что я в настоящее время: http://jsfiddle.net/9v97xsp9/

И HTML:

<div class="row"> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/400/300/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/200/400/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/500/250/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/250/400/" alt="" /> 
    </div> 
</div> 

Как может Я это делаю?

Answer 1

Дайте вашей строке класс .imageRow, чтобы вы не влияли на другие классы col-md-2.

<div class="row imageRow"> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/400/300/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/200/400/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/500/250/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/250/400/" alt="" /> 
    </div> 
</div> 

Затем используйте следующий CSS:

.imageRow { 
    font-size: 0px; 
    line-height: 0px; 
} 
.imageRow .col-md-2 { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 
@media (min-width: 992px) { 
    .imageRow .col-md-2 { 
     display: inline-block; 
    } 
} 

https://jsfiddle.net/9v97xsp9/2/

Объяснение:

Bootstrap использует float для их расположения. Какая ИМО - действительно отвратительный способ сделать что-то, потому что это не предназначалось для размещения контейнеров, а скорее позволяет обтекать тексты вокруг изображений или контейнеров.

При использовании float элементы фактически больше не занимают место. Следовательно, нам нужно удалить его.

Кроме того, для того, чтобы элементы-близнецы были вертикальными, они должны быть inline элементов. В этом случае inline-block - идеальное свойство для использования.

inline элементы имеют естественные пробелы. Таким образом, обходной путь заключается в том, чтобы вынуть шрифт и высоту строки.

Answer 2

См http://jsfiddle.net/9v97xsp9/1/

.va{ 
    display: table-cell; 
    vertical-align: middle; 
} 

для контейнера дивы.