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

Question

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

如果我在heading标签中有文字,它有默认的边距,可以推送下面的文字.因此图像将粘贴到顶部,文本将位于顶部下方.

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

我的问题是:

• 是否有一种本地引导方式来对齐列？
• 如果它不支持这种对齐,我可以使用什么"黑客"？我尝试了一些"黑客",但它们会影响基本引导功能.

究竟我需要做什么:

抱歉,但很难在jsfiddle中创建它,它包括Angular指令和模板.仅举例如:

我有一个指令产生这个:

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

如果你想做实验,我就做了这个小伙伴.我接受没有任何代码的解释.

我可以用一些"黑客"的CSS修复它,但我想知道我怎么能以正确的方式做到这一点.

Answer 1

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

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

你还想把图像放在col-*-2...

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