Question

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

我需要将图像垂直居中，以使其与文本一致。这是我需要它的编辑版本。

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

＆＃13;

<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>

＆＃13;

谢谢，丹尼尔。

Answer 1

目前为止，我发现最好的是：

howtocenterincss.com

它会告诉你如何将任何东西放在任何其他东西中，无论是垂直还是水平。请注意不要弄乱其余的布局。

因此，对于您的具体用例：

我们不知道文字的高度，也不知道图片的大小，它是内联块元素。

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

所以我们申请：

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用类覆盖bootstrap并使用flex。
or look for the flex version of bootstrap并使用内置类

添加一个类和css

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

<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 flex">
    <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>

链接到bootstrap，flex版本和使用类：d-flex flex-wrap align-items-cent

img {
  max-width:100%;
}

<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row row-padding" id="bg-white">
   <div class="container d-flex  flex-wrap align-items-center">
    <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>

垂直对齐列中的图像

2 个答案: