Vertical align image inside div bootstrap v3 [duplicate] - html

Question

This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
I am not getting this image vertical centered...
<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>
I have tried adding style="display: inline-block; height: 100%; vertical-align: middle;" to both div.
Also tried the class vcenter, I have even added it extra to the cssto be sure.
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
Any suggestions?

Answer 1

Don't think CSS is necessary here. Please try to add mt-auto mb-auto classes to the img or the second div with class col-lg-6.

Answer 2

If you want the img to be centered relative to the left content.
Wrap the whole thing in a flex container and add align-self: center; on the img container, now centering will be visible as long as the right container is shorter than the left one.
.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

In the image div , add these styles
display:flex;justify-content:center;align-items:center;
So it would become
<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>