Bootstrap垂直对齐图像

Question

本网站上：http://www.livenews.surf/我想让新闻图像和文字垂直居中对齐，我该怎么做？

Answer 1

最简单的解决方案是使用Flexbox（有关它的用法的更多详细信息，请参阅规格）。

对于这种特殊的情况下，指定自定义类，每片含格（目前它只有.col-md-11）您的内容，例如类“内容”，这代码添加到您的样式

.content { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
} 

小码解释：align-items垂直对齐项目，因为我们离开了默认的flex方向，这是行，并且flex-wrap将允许我们的父容器将孩子包装到下一行（默认为nowrap）。

请记住，即为了解答此问题，我没有包含供应商前缀，但我强烈建议您使用Autoprefixer等工具。

Answer 2

那么，当你正在使用的自举列，所以你需要通过以下几个步骤，使下面的解释：

为网页的一般情况下的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> 

首先，您需要使两列（图片+文字）的高度相同。为此，您可以使用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%; 
} 

这里是Plnkr。