Html 垂直对齐中间与 Bootstrap 响应式网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20465825/
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
Vertical align middle with Bootstrap responsive grid
提问by HP.
I have a very simple problem on vertical middle a spanusing Bootstrap 2.3.2.
我在span使用Bootstrap 2.3.2 的垂直中间 a 上有一个非常简单的问题。
Requirements:
要求：
There are two columns, left column has a fixed height 300px because there is 300x300 image inside.
Right column has text and must be centered based on left column.
The whole thing must be responsive. That's why I am using responsive image.
If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.
Must not use JS to solve this.
有两列，左列有一个固定的高度 300px，因为里面有 300x300 的图像。
右列有文本，必须基于左列居中。
整个事情必须是响应式的。这就是我使用响应式图像的原因。
如果第二列向下到底部，则其高度必须适合文本的大小。这意味着我无法在第二列上设置固定高度。
一定不要用JS来解决这个问题。
HTML:
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<img class="img-responsive" src="http://placehold.it/300x300"/>
</div>
<div class="span6 v-center">
<div class="content">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
CSS:
CSS:
.v-center {
display:table;
border:2px solid gray;
height:300px;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
My code:http://jsfiddle.net/qhoc/F9ewn/1/
我的代码：http : //jsfiddle.net/qhoc/F9ewn/1/
You can see what I did above: I basically set the second column spanas table and middlethe .contenttable-cell. I copied that method here How to use vertical align in bootstrap(with working example here http://jsfiddle.net/lharby/AJAhR/)
你可以看到我做了什么上面：我基本上设置第二列span的表，middle该.content表单元格。我在这里复制了该方法如何在引导程序中使用垂直对齐（这里有工作示例http://jsfiddle.net/lharby/AJAhR/）
My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.
由于上述要求，我的挑战有点不同。关于如何使它工作的任何想法？谢谢。
回答by Morpheus
回答by Arithran
.row {
letter-spacing: -.31em;
word-spacing: -.43em;
}
.col-md-4 {
float: none;
display: inline-block;
vertical-align: middle;
}
Note: .col-md-4 could be any grid column, its just an example here.
注意：.col-md-4 可以是任何网格列，这里只是一个例子。
