Вертикальное выравнивание по встроенным блокам (среднее не работает)

Question

У меня есть 3 divs рядом друг с другом с использованием сетки. Все divs (столбцы) являются встроенными блоками. Я добавил 3 класса для управления вертикальным выравниванием divs (vtop, vmiddle, vbottom). Проблема в том, что vtop и vbottom работают нормально, но vmiddle не показывает никаких действий.

<div class="container"> 
<div class="row"> 
    <div class="col-desktop-4 vmiddle"> 
     COLUMN 1<br/> 
     Line 1 
    </div> 
    <div class="col-desktop-4"> 
     COLUMN 2<br/> 
     Line 1<br/> 
     Line 2<br/> 
     Line 3 
    </div> 
    <div class="col-desktop-4 vbottom"> 
     COLUMN 3<br/> 
     Line 1 
    </div> 
</div> 

Есть ли у вас какие-либо идеи, почему это не работает?

JSFiddle: http://jsfiddle.net/marcbaur/5rg0rs3v/7/

Greets Марк

Answer 1

См: http://jsfiddle.net/5rg0rs3v/13/

Сначала вы должны скомпилировать меньше кода в CSS.

Почему вертикальное выравнивание не будет работать, будет объяснено среди прочего в http://phrogz.net/css/vertical-align/ раствор можно найти по адресу: http://css-tricks.com/centering-in-the-unknown/

Во-первых завернуть вы содержание в дополнительной DIV:

<div class="col-desktop-4 vmiddle"><div> 
     COLUMN 1<br/> 
     Line 1</div> 
    </div> 

И чем применять код css, как показано ниже:

.vmiddle:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 
.vmiddle { 
    display: inline-block; 
    vertical-align: middle; 
}