twitter-bootstrap Bootstrap 在列中垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45479261/
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 Vertical align in Column
提问by Philipp Rosengart
So I have a jumbotron with one row and two columns for Desktop view. The row height depends on the text. I want to center an image vertically to the text beside.
所以我有一个带有一行两列的桌面视图的大屏幕。行高取决于文本。我想将图像垂直居中到旁边的文本。
I'm using a grid layout with two columns for this and following code to vertically center the image:
我为此使用带有两列的网格布局和以下代码来垂直居中图像：
#jumbotron-introduction {
background-color: white;
}
#p-introduction {
font-size: 16px;
}
#image-introduction {
width: 100%;
}
.vcenter {
display: flex;
align-items: center;
justify-content: center;
}<div class="container">
<div class="jumbotron" id="jumbotron-introduction">
<div class="row">
<div class="col-xs-12 col-md-6 col-sm-6">
<h3>...</h3>
<p id="p-introduction">...</p>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 vcenter">
<img src="Images/..." id="image-introduction">
</div>
</div>
</div>
</div>But nothing changes, the image is still centered on the top of the column. I also tried the following code:
但是没有任何变化，图像仍然位于列的顶部居中。我还尝试了以下代码：
.vcenter {
display: inline-block;
vertical-align: middle;
}But it's the same result, nothing happens.
但结果是一样的，什么也没有发生。
Thats how it looks like at the moment
这就是现在的样子
But I want it to look like this:
但我希望它看起来像这样：
回答by Eyal Cohen
When ever I need to center something in HTML - the css-tricks guideis always help me to do so. I suggest you read and save it for next time you need to center something!
当我需要在 HTML 中居中时 - css-tricks 指南总是帮助我这样做。我建议您阅读并保存它以备下次需要居中时使用！
For your question, you can achieve the desired result using flexbox -
Set the .vcenter display to flex, so you can use the align-itemsproperty.
对于您的问题，您可以使用 flexbox 实现所需的结果 - 将 .vcenter 显示设置为 flex，以便您可以使用该align-items属性。
.jumbotron__container {
display: flex;
background: #fff;
}
.jumbotron__text {
flex: 1 0 50%;
padding: 10px;
border-right: 1px solid black;
}
.jumbotron__image {
display: flex;
flex: 1 0 50%;
align-items: center;
justify-content: center;
}<div class="container">
<div class="jumbotron" id="jumbotron-introduction">
<div class="jumbotron__container">
<div class="jumbotron__text">
<h3>Loren And Ipsum</h3>
<p id="p-introduction">Dolum And Smith<p>
</div>
<div class="jumbotron__image">
<img src="Images/..." id="image-introduction">
</div>
</div>
</div>
</div>回答by miken32
I think it was still in beta when the question was asked, but Bootstrap 4 has new flexbox-based utility classesthat make this easy. In particular, align-self-centerwould have done what you were looking for:
我认为在提出问题时它仍处于测试阶段，但 Bootstrap 4 具有新的基于 flexbox 的实用程序类，使这变得容易。特别是，align-self-center会做你想要的：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron bg-light">
<div class="row">
<div class="col-xs-12 col-md-6">
<h3>Text</h3>
<p class="h4">Text</p>
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
<p>Just a little more text</p>
</div>
<div class="col-xs-12 col-md-6 align-self-center">
<img src="https://www.gstatic.com/images/branding/product/2x/avatar_square_grey_48dp.png">
</div>
</div>
</div>
</div>(Snippet doesn't seem to work unless it's full screen BTW.)
（除非是全屏 BTW，否则代码段似乎不起作用。）
回答by Dhaarani
#image-introduction{
vertical-align: middle;
position: absolute;
top: 45%;
left: 45%;
}
.col-md-6.col-sm-6.col-xs-6 {
display: table-cell;
height: auto;
border: 1px solid black;
float: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="parent">
<div class="col-md-6 col-sm-6 col-xs-6">
<img src="..." id="image-introduction">
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div></div>回答by UncaughtTypeError
Use an inline-blockhelper.
使用inline-block帮手。
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
height: 200px;
white-space: nowrap;
}
#image-introduction {
display: inline-block;
vertical-align: middle;
}
.inline-block-helper {
height: 100%;
vertical-align: middle;
display: inline-block;
}<div class="col-xs-12 col-md-6 col-sm-6 vcenter">
<span class="inline-block-helper"></span>
<img src="https://placehold.it/100x100" id="image-introduction">
</div>