twitter-bootstrap Twitter bootstrap 3 - 垂直对齐一行中的列[中间]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28077398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap 3 - vertical align columns in a row [middle]
提问by Ifch0o1
I see bootstrap do not fix the height of the columns in the row. For example: image 1:1, it will be responsive in the column, but the position of the image is at the top of the row.
我看到引导程序不固定行中列的高度。例如：图像1:1，在列中会响应，但图像的位置在行的顶部。
If I have text in headingtag, It have default margins that pushes the text below. So the image will be bonded to the top and the text will be little below the top.
如果我在heading标签中有文本，它有默认的边距，可以推动下面的文本。因此，图像将绑定到顶部，而文本将略低于顶部。
What if I need to normalize the columns and make it aligned in the middle?
如果我需要标准化列并使其在中间对齐怎么办？
My questions is:
我的问题是：
- Is there a native bootstrap way to align the columns?
- If it not support this kind of alignment, what "hack" I can use? I Tried some "hacks" but they affect the base bootstrap functionality.
- 是否有本机引导方法来对齐列？
- 如果它不支持这种对齐方式，我可以使用什么“hack”？我尝试了一些“黑客”，但它们影响了基本的引导程序功能。
What exactly I need to do:
我到底需要做什么：
Sorry but it's hard to make it in a jsfiddle, It's includes Angular directives and templates. Just for example:
抱歉，很难在 jsfiddle 中实现它，它包括 Angular 指令和模板。举个例子：
I have a directive which generates this:
我有一个指令可以生成这个：
I need to do align the image in the middle, or at least to be at the headingvertical start. For example:
我需要在中间对齐图像，或者至少要在heading垂直开始处对齐。例如：
I made this jsfiddleif you want to experiment. I accept just explanations without any code.
如果你想尝试，我做了这个jsfiddle。我只接受没有任何代码的解释。
I can fix it with some "hacked" css, but I wanna know how I can do that the right way.
我可以用一些“被黑”的 css 来修复它，但我想知道如何以正确的方式做到这一点。
回答by Zim
One approach is to use translateY on the imgelement like this:
一种方法是在img元素上使用 translateY ，如下所示：
.v-center {
position: relative;
transform: translateY(50%);
}
You'll also want to put the image inside a col-*-2..
您还需要将图像放入col-*-2..
回答by geeves
Another way to align the image at the top of the first paragraph is to break your design into two rows. The first row contains the header and the second row contains the image, paragraphs and links. This closely resembles your second image above, if that's the way you want it to look.
在第一段顶部对齐图像的另一种方法是将您的设计分成两行。第一行包含标题，第二行包含图像、段落和链接。这与上面的第二张图片非常相似，如果这是您想要的样子。
<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>
