Twitter bootstrap 3 - 垂直对齐一行中的列 [中间]

Question

我看到 bootstrap 没有固定行中列的高度。例如：image1:1，它会在列中响应，但是图片的位置在行的顶部。

如果我在 heading 标签中有文字，它有默认的边距来推动下面的文字。所以图像会被绑定到顶部，而文本会稍微低于顶部。

如果我需要规范化列并使其居中对齐怎么办？

我的问题是：

是否有本机 bootstrap 对齐列的方法？
如果不支持这种对齐方式，我可以用什么"hack"？我尝试了一些 "hacks" 但它们会影响基本 bootstrap 功能。

我到底需要做什么：

抱歉，很难在 jsfiddle 中实现它，它包含 Angular 指令和模板。举个例子：

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

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

我做了这个 jsfiddle 如果你想试验的话。我只接受没有任何代码的解释。

我可以用一些 "hacked" css 来修复它，但我想知道如何以正确的方式做到这一点。

Answer 1

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

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

您还需要将图像放在 col-*-2..

演示： http://bootply.com/tVyuhaFoww

Answer 2

另一种对齐第一段顶部图像的方法是将您的设计分成两行。第一行包含 header，第二行包含图像、段落和链接。这与上面的第二张图片非常相似，如果这是您想要的样子的话。

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>

Twitter bootstrap 3 - 垂直对齐一行中的列 [中间]

Twitter bootstrap 3 - vertical align columns in a row [middle]

twitter-bootstrap

vertical-alignment