Comment puis-je centrer mon contenu dans ce div responsive?

Question

J'ai 4 colonnes d'affilée qui deviennent 1 colonne sur mobile. La façon dont cela semble sur le mobile est très bien, mais je veux centrer le contenu en divs 2 et 4 dans chaque rangée. Quelle serait la meilleure façon de faire cela?

Apparemment, ma modification a été supprimée ou le site a foiré, mais j'avais dit que je voulais le faire verticalement et horizontalement. Cependant, c'est de ma faute que j'ai oublié de faire un lien vers la page. Désolé les gars. Edit: J'apprécie toutes les réponses, mais je ne pense pas que quiconque comprend que cette div n'a pas de hauteur fixe. Je veux juste que le texte et les icônes restent centrés pendant que l'écran bouge. Le flex ne semblait pas fonctionner car il fallait régler une hauteur à la div.

J'ai aussi simplifié mon code HTML

code

.clientsdetail { 
 
    text-align: center; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow-x: hidden; 
 
} 
 
.clientinfo h3 { 
 
    padding-top: 10px;; 
 
} 
 
.clientinfo p { 
 
    padding: 0px 30px; 
 
    font-size: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-3 nopadding"> 
 
     <img class="img-responsive" src="img/clients/ivey.jpg"> 
 
    </div> 
 
    <div class="col-md-3 nopadding cinfo"> 
 
     <div class="clientinfo text-center"> 
 
     <h3>IVEY</h3> 
 
     <p>Clarksville, TN</p> 
 
     <div class="social-icons-clients"> 
 
      <a href="#"><span class="icon-sprite sprite-ig">&nbsp;</span></a> 
 
      <a href="#"><span class="icon-sprite sprite-fb">&nbsp;</span></a> 
 
      <a href="#"><span class="icon-sprite sprite-gp">&nbsp;</span></a> 
 
      <a href="#"><span class="icon-sprite sprite-sc">&nbsp;</span></a> 
 
      <a href="https://twitter.com/contracoda" target="_blank"><span class="icon-sprite sprite-tw">&nbsp;</span></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-3 nopadding cinfo"> 
 
     <img class="img-responsive" src="img/clients/rufus.jpg"> 
 
    </div> 
 
    <div class="col-md-3 nopadding"> 
 
     <div class="clientinfo text-center"> 
 
     <h3>RUFUS DAWKINS</h3> 
 
     <p>Clarksville, TN</p> 
 
     <div class="social-icons-clients"> 
 
      <a href="#"><span class="icon-sprite sprite-ig">&nbsp;</span></a> 
 
      <a href="#"><span class="icon-sprite sprite-fb">&nbsp;</span></a> 
 
      <a href="#"><span class="icon-sprite sprite-gp">&nbsp;</span></a> 
 
      <a href="#"><span class="icon-sprite sprite-sc">&nbsp;</span></a> 
 
      <a href="https://twitter.com/contracoda" target="_blank"><span class="icon-sprite sprite-tw">&nbsp;</span></a> 
 
     </div> 
 
     </div> 
 
    </div> \t 
 
</div>

Answer 1

(MISE À JOUR) Vous pouvez utiliser le Pseudoclass pour sélectionner 2 et 4 div.

.row div:nth-child(2n) { 
/* Your CSS Style */ 
} 

Si le contenu à l'intérieur du 2 et 4 div sont inline/inline-block, il suffit d'utiliser text-align: center;.

Démo

Voici la démo simple pour le pseudoclass.

.row > div { 
 
padding: 10px; 
 
} 
 

 
.row > div:nth-child(2n) { 
 
color: #fff; 
 
background: red; 
 
text-align: center; 
 
height: 50px; 
 
display: flex; 
 
align-items: center; 
 
justify-content: center; 
 
}

<div class="row"> 
 
<div>One</div> 
 
<div>Two</div> 
 
<div>Three</div> 
 
<div>Four</div> 
 
</div>

Espérons que cela est utile pour vous. Merci.

Answer 2

Vous pouvez utiliser les propriétés flex pour centrer votre contenu.

pour plus de détails, vous pouvez consulter

Flexbox: center horizontally and vertically

Answer 3

<div class="col-md-6 nopadding cinfo"> 
    <div class="clientinfo"> 
     <h3>IVEY</h3> 
     <p>Clarksville, TN</p> 
     <div class="social-icons-clients"> 
      <a href="#"><span class="icon-sprite sprite-ig">&nbsp;</span></a> 
      <a href="#"><span class="icon-sprite sprite-fb">&nbsp;</span></a> 
      <a href="#"><span class="icon-sprite sprite-gp">&nbsp;</span></a> 
      <a href="#"><span class="icon-sprite sprite-sc">&nbsp;</span></a> 
      <a href="https://twitter.com/contracoda" target="_blank"> 
       <span class="icon-sprite sprite-tw">&nbsp;</span> 
      </a> 
     </div> 
    </div> 
</div> 

Answer 4

Essayez une approche différente. Le système de grille flottante de Bootstrap ne vous mènera pas où vous voulez.

D'abord, enlever row et col- les classes afin que vous avez quelque chose comme ceci:

<div class="my-row"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Ensuite, utilisez CSS pour obtenir le même résultat que précédemment, mais avec le contenu central aligné:

@media (min-width: 992px) { 
    .my-row { 
    display: flex; 
    align-items: stretch; 
    } 

    .my-row > div { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 
} 

Si vous utilisez SASS, remplacez le 992px codé en dur par la variable @screen-md-min.

---

Voici un jsFiddle de votre exemple simplifié:
https://jsfiddle.net/mpnz9b30/1/