Twitter bootstrap 3 - вертикальные выравнивающие столбцы в строке [средний]

Question

Я вижу, что bootstrap не фиксирует высоту столбцов в строке. Например: изображение 1: 1, оно будет реагировать в столбце, но положение изображения находится в верхней части строки.

Если у меня есть текст в теге heading, у него есть поля по умолчанию, которые выталкивают текст ниже. Таким образом, изображение будет привязано к вершине, а текст будет немного ниже вершины.

Что делать, если мне нужно нормализовать столбцы и выровнять по центру?

Мои вопросы:

• Есть ли родной самозагрузки способ выровнять столбцы?
• Если он не поддерживает такое выравнивание, то какой «взлом» я могу использовать? Я пробовал некоторые «хаки», но они влияют на функциональность базового бутстрапа.

Что именно мне нужно сделать:

Извините, но это трудно сделать это в jsfiddle, это включает в себя угловые директивы и шаблоны. Так, например:

У меня есть директива, который генерирует этот:

мне нужно сделать выровнять изображение по центру или, по крайней мере, чтобы быть в вертикальном старте heading. Например:

Я сделал это jsfiddle, если вы хотите поэкспериментировать. Я принимаю просто объяснения без какого-либо кода.

Я могу исправить это с помощью некоторых «взломанных» css, но я хочу знать, как я могу это сделать правильно.

Answer 1

Один подход заключается в использовании translateY на img элемента, как это:

.v-center { 
    position: relative; 
    transform: translateY(50%); 
} 

Вы также хотите, чтобы поместить изображение внутри col-*-2 ..

Демо:http://bootply.com/tVyuhaFoww

Answer 2

Другим способом выравнивания изображения в верхней части первого абзаца является разбиение дизайна на две строки. Первая строка содержит заголовок, а вторая строка содержит изображение, абзацы и ссылки. Это очень похоже на второе изображение выше, если это так, как вы хотите, чтобы он выглядел.

http://jsfiddle.net/404vska2/

<div class="row"> 
    <div class="col-xs-10 col-xs-push-2"> 
    <h4 class="ng-binding">Monaco make Bernardo Silva move permanent</h4> 
    </div> 
</div> 
<div class="row"> 
    <img src="http://s12.postimg.org/gt71dlbd5/1421893782_flat_world_cup_icon_512_Socker_1.png" alt="" class="col-xs-2"> 
    <div class="col-xs-10"> 
    <p class="ng-binding">Bernardo Silva's loan move from SL Benfica to AS Monaco FC has been made permanent, with the 20-year-old settling in well since his summer switch to France.</p> 
    <span class="rss-news-date ng-binding">Jan 21, 2015</span> 
    <p><a ng-href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent" href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent">Lean more</a> </p> 
    </div> 
</div>