Twitter Bootstrap 3 - vertikale Ausrichtung Spalten in einer Reihe [Mitte]

Question

Ich sehe Bootstrap nicht die Höhe der Spalten in der Zeile zu beheben. Zum Beispiel: Bild 1: 1, es wird in der Spalte reagieren, aber die Position des Bildes ist an der Spitze der Reihe.

Wenn ich Text in heading Tag habe, haben es Standardränder, die den Text unten schiebt. Also wird das Bild an die Spitze gebunden und der Text wird etwas unterhalb der Spitze sein.

Was ist, wenn ich die Spalten normalisieren und in der Mitte ausrichten muss?

Meine Fragen sind:

• Gibt es eine native Bootstrap Art und Weise die Spalten auszurichten?
• Wenn es diese Art der Ausrichtung nicht unterstützt, was "Hack" kann ich verwenden? Ich habe einige "Hacks" versucht, aber sie beeinflussen die Basis-Bootstrap-Funktionalität.

Was genau muss ich tun:

Sorry, aber es ist schwer, es in einem jsfiddle zu machen, ist es enthält Angular Richtlinien und Vorlagen. Nur zum Beispiel:

Ich habe eine Richtlinie, die diese erzeugt:

Ich brauche das Bild in der Mitte tun ausrichten, oder zumindest an dem heading vertikalen Start zu sein. Zum Beispiel:

Ich habe diese jsfiddle gemacht, wenn Sie experimentieren wollen. Ich akzeptiere nur Erklärungen ohne Code.

Ich kann es mit einigen "gehackten" CSS beheben, aber ich möchte wissen, wie ich das richtig machen kann.

Answer 1

Ein Ansatz ist translateY auf dem img Element wie folgt zu verwenden:

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

Sie werden auch in einem col-*-2 ..

Demo das Bild setzen wollen:http://bootply.com/tVyuhaFoww

Answer 2

Eine andere Möglichkeit, das Bild am Anfang des ersten Absatzes auszurichten, besteht darin, das Design in zwei Zeilen zu teilen. Die erste Zeile enthält den Header und die zweite Zeile enthält das Bild, Absätze und Links. Dies ähnelt sehr Ihrem zweiten Bild oben, wenn es so aussieht, wie Sie es wollen.

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>