Html Bootstrap 垂直对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37156582/
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 Image
提问by Gon?alo Loureiro
On this website: http://www.livenews.surf/I want to make news images and text vertically middle align, how i can do that?
在这个网站上：http: //www.livenews.surf/我想让新闻图片和文字垂直居中对齐，我该怎么做？
回答by jcaruso
Use the following classes in your containing div.rowinstead of custom CSS as suggested for bootstrap 4.
在你的容器中使用以下类，div.row而不是像 bootstrap 4 建议的那样使用自定义 CSS。
d-flex flex-wrap align-items-center
d-flex flex-wrap align-items-center
回答by Leo Napoleon
The easiest solution is to use Flexbox (see spec. for more details on it's usage).
最简单的解决方案是使用 Flexbox（有关其用法的更多详细信息，请参阅规范）。
For this particular case, assign a custom class to each of your content containing div (currently it only has .col-md-11), for example class "content" and add this code to your stylesheet
对于这种特殊情况，为每个包含 div 的内容分配一个自定义类（目前它只有.col-md-11），例如类“内容”并将此代码添加到您的样式表
.content {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Small code explanation: align-itemsaligns the items vertically, since we left the default flex direction which is row and flex-wrapwill allow our parent container to wrap children to next line (default is nowrap).
小代码说明：align-items垂直对齐项目，因为我们保留了默认的 flex 方向，即行，flex-wrap并允许我们的父容器将子容器包装到下一行（默认为nowrap）。
Keep in mind, that I haven't included vendor prefixesfor the sake of this answer, however I would strongly recommend you to do so, using a tool such as Autoprefixer.
请记住，为了这个答案，我没有包含供应商前缀，但是我强烈建议您这样做，使用诸如 Autoprefixer 之类的工具。
回答by Mohammad Usman
Well, As you are using bootstrap columns, so you will need to make by following a couple of steps as explained below:
好吧，由于您使用的是引导列，因此您需要按照以下说明执行几个步骤：
As a general case html structure of your web page is as follows:
作为一般情况，您的网页的 html 结构如下：
<div class="col-md-11">
<div class="col-md-5">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
<div class="col-md-7">
// text goes here
</div>
</div>
First of all you will need to make the height of both columns (image + text) same. For this you can use jQuery matchHeight. After that you can make your images vertically centered with the help of following change.
首先，您需要使两列（图像+文本）的高度相同。为此，您可以使用 jQuery matchHeight。之后，您可以借助以下更改使图像垂直居中。
<div class="col-md-5 photo">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
.photo {
display: table;
}
.photo a {
vertical-align: middle;
display: table-cell;
}
.photo img {
display: block;
height: auto;
width: 100%;
}
Here is Plnkr.
这是Plnkr。
