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

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

Answer 2

如果您希望 img 相对于左侧内容居中。

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

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

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