twitter-bootstrap Bootstrap：如何在列内垂直居中内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44717942/
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
Bootstrap: How to center content vertically within a column
提问by tinymarsracing
I have spent hours on this problem now and have read through countless questions, but none of the provided solutions works for me, so I'm now just gonna post my specific problem:
我现在已经在这个问题上花费了几个小时并阅读了无数问题，但是提供的解决方案都不适用于我，所以我现在只是要发布我的具体问题：
I want to build a row with four columns. The first three columns have pictures in them and the fourth column has a text description that I want to show vertically centered (meaning with an equal margin on the top and bottom that is obviously not fixed, but responsive to changing screen-sizes). Here's the code:
我想用四列构建一行。前三列有图片，第四列有一个文本描述，我想垂直居中显示（意思是顶部和底部的边距相等，这显然不是固定的，但可以响应不断变化的屏幕尺寸）。这是代码：
<section>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6">
<img ...>
</div>
<div class="col-lg-4 col-sm-6">
<img ...>
</div>
<div class="col-lg-3 col-sm-6">
<img ...>
</div>
<div class="col-lg-1 col-sm-6">
<div class="container-fluid">
<p>Some text that is supposed to be vertically centered within the column</p>
</div>
</div>
</div>
</div>
</section>
It must have to do something with the Bootstrap specific classes that non of the CSS-based solutions I can find on this works. How can I make it work in this particular example? Feel free to make any changes you want on this part:
它必须对 Bootstrap 特定的类做一些事情，我可以在这个作品上找到非基于 CSS 的解决方案。我怎样才能让它在这个特定的例子中工作？随意对这部分进行任何您想要的更改：
<div class="container-fluid">
<p>Some text that is supposed to be vertically centered within the column</p>
</div>
However the rest of the structure should remain unchanged if possible (including the col-lg-1).
但是，如果可能，结构的其余部分应保持不变（包括 col-lg-1）。
Your help is greatly appreciated!
非常感谢您的帮助！
回答by Soheil Pourbafrani
You can use flexbox. Make your outer div, display: flexand use The property align-itemsto make it's contents vertically center. Here is the code:
您可以使用弹性盒。制作您的外部div，display: flex并使用 The 属性align-items使其内容垂直居中。这是代码：
#outerDiv{
display: flex;
align-items: center;
flex-wrap: wrap;
}
回答by MrOrhan
In Bootstrap 4, add "align-self-center"-class to the col, where you want the content centred vertically.
在 Bootstrap 4 中，将“align-self-center”-class 添加到 col，您希望内容垂直居中。
回答by EmmaJ
The following code will center items perfectly within a div:
以下代码将在 div 中完美地居中项目：
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
justify-content: center;
回答by TheLiquidCharcoal
All you need to do is adding below snippet to your CSS.
您需要做的就是将以下代码段添加到您的 CSS 中。
just like this.
像这样。
.row{ display: flex; align-items: center;}
I tried the same code and got output too. if you want to see, download the file and run it.
我尝试了相同的代码并得到了输出。如果您想查看，请下载该文件并运行它。
https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0
https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0
