Twitter bootstrap 3 - 连续垂直对齐列[中]

Question

我看到bootstrap没有修复行中列的高度。例如：图像1：1，它将在列中响应，但图像的位置位于行的顶部。

如果我在heading标记中有文字，则其默认边距会推送下面的文字。因此，图像将粘贴到顶部，文本将位于顶部之下。

如果我需要对列进行标准化并使其在中间对齐，该怎么办？

我的问题是：

• 是否有一种本地引导方式来对齐列？
• 如果它不支持这种对齐，那么＆＃34; hack＆＃34;我可以用？我试过一些＆＃34; hacks＆＃34;但它们会影响基本引导功能。

我到底需要做什么：

很抱歉，但很难在jsfiddle中创建它，它包括Angular指令和模板。仅举例：

我有一个产生这个的指令：

我需要在中间对齐图像，或者至少在heading垂直开始处对齐。例如：

如果你想进行实验，我就做了这个jsfiddle。我接受的解释没有任何代码。

我可以用一些＆＃34;黑客攻击＆＃34; css，但我想知道我怎么能以正确的方式做到这一点。

Answer 1

一种方法是在img元素上使用translateY，如下所示：

.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>