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 {&nbsp; display: flex;&nbsp; flex-direction: row;}.vcenter {&nbsp; align-self: center;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="flex">&nbsp; <div class="col-lg-6 d-flex flex-column justify-content-center">&nbsp; &nbsp; <h4><strong>Help</strong></h4>&nbsp; &nbsp; <blockquote>&nbsp; &nbsp; &nbsp; <p class="description" style="font-size: 14px;">&nbsp; &nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </blockquote>&nbsp; &nbsp; <h4><strong>Bewerken</strong></h4>&nbsp; &nbsp; <blockquote>&nbsp; &nbsp; &nbsp; <p class="description" style="font-size: 14px;">&nbsp; &nbsp; &nbsp; &nbsp; 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&nbsp; &nbsp; &nbsp; &nbsp; 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>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> op de bewuste pagina.&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </blockquote>&nbsp; </div>&nbsp; <div class="col-lg-6 vcenter">&nbsp; &nbsp; <img src="https://picsum.photos/100/100" class="img-fluid" alt="Torza">&nbsp; </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">&nbsp; &nbsp; <img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza"></div>