html - 垂直对齐列中的图像

Question

我正在使用 bootstrap，我似乎无法找到在 div 中垂直居中图像的解决方案。我环顾四周，发现了多种不同的解决方案，但没有一个真正适合我。

Here's an image of the problem

我需要让该图像垂直居中，以便与文本对齐。这是我需要的编辑版本。

Image

我需要它对文本做出响应，所以我不能只在那里添加边距。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row row-padding" id="bg-white">
  <div class="container">
    <div class="col-md-6">
      <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded">
    </div>
    <div class="col-md-6">
      <h1>Lorem Ipsum</h1>
      <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
                                minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
                                malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
                                quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
                                ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
                                expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
                                aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
                                iis illum proident admodum ne est tempor familiaritatem. Hic anim 
                                instituendarum, an sed multos quae multos.</h4>
    </div>
  </div>
</div>

谢谢， 丹尼尔。

Answer 1

到目前为止我发现的最好的是:

howtocenterincss.com

它会告诉您如何将任何东西置于任何其他东西的中心，无论是垂直还是水平。 请注意不要弄乱布局的其余部分。

因此对于您的特定用例:

我们不知道文本的高度，也不知道图像的大小，它是行内 block 元素。

回应: <div style="display:flex;align-items:center;">Text Content</div>

所以我们申请:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row row-padding" id="bg-white">
  <div class="container">
    <div class="col-md-6" style="display:flex;align-items:center;">
      <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded">
    </div>
    <div class="col-md-6">
      <h1>Lorem Ipsum</h1>
      <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
                                minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
                                malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
                                quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
                                ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
                                expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
                                aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
                                iis illum proident admodum ne est tempor familiaritatem. Hic anim 
                                instituendarum, an sed multos quae multos.</h4>
    </div>
  </div>
</div>