div引导程序v3中的垂直对齐图像[重复]

Question

此问题已经在这里有了答案：

vertical-align with Bootstrap 3（23个答案）

Vertical Align Center in Bootstrap 4（15个答案）

关闭3分钟前。

我没有使此图像垂直居中...

<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

如果要使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>

Answer 2

在图像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 3

不需要CSS在这里。请尝试将mt-auto mb-auto类添加到img或具有col-lg-6类的第二个div。