twitter-bootstrap - Twitter bootstrap 3 - 在一行中垂直对齐列[中]

Question

我看到 Bootstrap 不固定行中列的高度。例如:图片 1:1，它会在列中响应，但图片的位置在行首。

如果我在 heading 中有文字标签，它有默认的边距来插入下面的文本。所以图像将被绑定(bind)到顶部，而文本将略低于顶部。

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

我的问题是:

是否有 native Bootstrap 方式来对齐列？

如果它不支持这种对齐方式，我可以使用什么“hack”？我尝试了一些“黑客”，但它们会影响基本 Bootstrap 功能。

我到底需要做什么:

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

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



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


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

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

Answer 1

一种方法是在 img 上使用 translateY像这样的元素:

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

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

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