0

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?

Muiter
  • 1,470
  • 6
  • 26
  • 39

3 Answers3

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.

Samuel C
  • 26
  • 1
  • 2
1

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>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
0

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>
v1shnu
  • 2,211
  • 8
  • 39
  • 68