div bootstrap v3 内的垂直对齐图像

Question

我没有让这张图片垂直居中...

<div class="col-lg-6 d-flex flex-column justify-content-center">

    <h4><strong>Help</strong></h4>
    <blockquote><p class="description" style="font-size: 14px;">
    Als er op een pagina een <i class="fas fa-question-circle"></i> staat en u gaat daar met de muis op staan komt er een overzicht tevoorschijn met de mogelijkheden van de betreffende pagina.
    </p></blockquote>

    <h4><strong>Bewerken</strong></h4>
    <blockquote><p class="description" style="font-size: 14px;">
    Via de knop <button type="button" class="btn btn-xs" title="Voeg toe"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> kan er een nieuw item worden toegevoegd aan de huidige pagina.<br />
    Als er gegevens kunnen worden gewijzigd is dit zichtbaar door een <abbr title="">stippellijn</abbr> onder de bewuste tekst. Het kan zijn dat de bewerkmodus eerst moet worden ingeschakeld via de knop <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> op de bewuste pagina.
    </p></blockquote>

</div>
<div class="col-lg-6">

    <img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza">

</div>

我已经尝试将 style="display: inline-block; height: 100%; vertical-align: middle;" 添加到 div。

也尝试了 class vcenter，我什至将它额外添加到 css 以确保。

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

有什么建议吗？

Answer 1

在图像 div 中，添加这些样式

display:flex;justify-content:center;align-items:center;

所以会变成

<div class="col-lg-6" style="display:flex;justify-content:center;align-items:center">

    <img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza">

</div>

Answer 2

不要认为CSS在这里是必要的。请尝试将 mt-auto mb-auto classes 添加到 img 或第二个 div with class col-lg-6.

Answer 3

如果你想让img相对于左边的内容居中

将整个东西包裹在一个 flex 容器中并在 img 容器上添加 align-self: center;，现在只要右边的容器比左边的容器短，居中就会可见。

.flex {
  display: flex;
  flex-direction: row;
}

.vcenter {
  align-self: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex">
  <div class="col-lg-6 d-flex flex-column justify-content-center">

    <h4><strong>Help</strong></h4>
    <blockquote>
      <p class="description" style="font-size: 14px;">
        Als er op een pagina een <i class="fas fa-question-circle"></i> staat en u gaat daar met de muis op staan komt er een overzicht tevoorschijn met de mogelijkheden van de betreffende pagina.
      </p>
    </blockquote>

    <h4><strong>Bewerken</strong></h4>
    <blockquote>
      <p class="description" style="font-size: 14px;">
        Via de knop <button type="button" class="btn btn-xs" title="Voeg toe"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> kan er een nieuw item worden toegevoegd aan de huidige pagina.<br /> Als er gegevens kunnen worden
        gewijzigd is dit zichtbaar door een <abbr title="">stippellijn</abbr> onder de bewuste tekst. Het kan zijn dat de bewerkmodus eerst moet worden ingeschakeld via de knop <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>"
          data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> op de bewuste pagina.
      </p>
    </blockquote>

  </div>
  <div class="col-lg-6 vcenter">
    <img src="https://picsum.photos/100/100" class="img-fluid" alt="Torza">
  </div>
</div>

div bootstrap v3 内的垂直对齐图像

Vertical align image inside div bootstrap v3

html

css

twitter-bootstrap-3