2017-10-20 32 views
1

Alors j'essaie de placer deux divs dans une colonne au centre de la page afin qu'il y ait peu ou pas d'espace entre eux. La rangée du haut est bonne, mais la rangée du bas me cause problème. Je voudrais garder les logos de la même taille que la première rangée et les centrer ensemble. J'ai montré à quoi cela ressemble ci-dessous. Code joint. Toute contribution serait vivement appréciée. Merci!Centre divs dans une colonne dans Bootstrap

<div class="col-md-12 vertical-center" style="margin-bottom: 40px;"> 
        <div class="col-md-3 text-center"> 
         <a href="http://www.msh.on.ca/" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png"> 
         </a> 
        </div> 
        <div class="col-md-3 text-center"> 
         <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a> 
        </div> 
        <div class="col-md-3 text-center"> 
         <a href="http://www.southlakeregional.org/" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a> 
        </div> 
        <div class="col-md-3 text-center"> 
         <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
        </div> 
       </div> 

       <div class="col-md-12 vertical-center" style="margin-bottom: 40px;"> 
        <div class="col-md-3 center-block"> 
         <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
        </div> 
        <div class="col-md-3 center-block"> 
         <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
        </div> 
       </div> 

enter image description here

+1

Utilisez Flexbox. Vous serez en mesure d'aligner les éléments selon vos besoins. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Korgrue

Répondre

3

Essayez cette html avec quelques modifications:

<div class="col-md-12 vertical-center" style="margin-bottom: 40px;"> 
    <div class="col-md-3 text-center"> 
    <a href="http://www.msh.on.ca/" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png"> 
    </a> 
    </div> 
    <div class="col-md-3 text-center"> 
    <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a> 
    </div> 
    <div class="col-md-3 text-center"> 
    <a href="http://www.southlakeregional.org/" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a> 
    </div> 
    <div class="col-md-3 text-center"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
</div> 

<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;"> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
</div> 

Modifié HTML:

<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;"> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
</div> 

Démo: http://jsfiddle.net/lotusgodkk/GCu2D/2191/

+0

Ceci est parfait - pouvez-vous me décrire comment ce décalage fonctionne pour garder les images de la même taille que le md- 3 ci-dessus? – Zack

+0

@Zack voici les documents pour offset: https://getbootstrap.com/docs/3.3/css/#grid-offsetting. Faites-moi savoir si vous avez besoin de plus d'explications –