Bootstrap Image Kolom centereren

[shahied2015]

Beste Leden,

Graag wil ik jullie om hulp vragen betreft het centreren van de volgende kolom op de webpagina.

Is een foto met tekst dat ik op de webpagina in het midden wil hebben.

Normaal zitten er 4 foto´s naast elkaar, maar ik heb maar 1 foto op de website nodig.

<div class="row mt-xlg mb-xlg">
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumb-info thumb-info-hide-wrapper-bg">
<span class="thumb-info-wrapper">
<a href="about-me.html">
<img src="img/team/team-1.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">tekst</span>
<span class="thumb-info-type">tekst</span>
</span>
</a>
</span>
</span>
</span>
</span>
</div>
</div>
</div>
</div>



Bedankt voor jullie Hulp.

 

[bron]

Hi, de html structuur klopt niet helemaal, hieronder de juiste.

<div class="row mt-xlg mb-xlg">
  <div class="col-xs-12 col-sm-6 col-md-3">
    <span class="thumb-info thumb-info-hide-wrapper-bg">
      <span class="thumb-info-wrapper">
        <a href="about-me.html">
          <img src="img/team/team-1.jpg" class="img-responsive" alt="">
          <span class="thumb-info-title">
            <span class="thumb-info-inner">tekst</span>
            <span class="thumb-info-type">tekst</span>
          </span>
        </a>
      </span>
    </span>
  </div>
</div>

Omdat class="col-XX-push-4-5" niet bestaat heb ik deze hieronder zelf gemaakt zodat alles centreert.

@media (min-width: 768px) {
  .mt-xlg > .col-sm-6 {
    left: 25%;  /* sm (12-6):2 > 3/12 */
  }
}
@media (min-width: 992px) {
  .mt-xlg > .col-md-3 {
    left: 37.5%;  /* md (12-3):2 > 4.5/12 */
  }
}

Het is dan wel noodzakelijk dat .thumb-info {...} in de css een display: inline-block of display: block heeft.

Suc6. Have fun.