web-dev-qa-db-fra.com

Aligner verticalement DIV et texte dans Bootstrap 4

J'ai passé de nombreuses questions ici, ainsi que de nombreux articles et documentation sur Bootstrap 4, mais je n'ai pas trouvé ce que je cherchais.

DEMO: https://jsfiddle.net/zxLLqsm0/

Je cherche à créer des boîtes ayant exactement la même hauteur pour toutes les colonnes et à centrer verticalement le texte à l'intérieur des boîtes. J'ai réussi à aligner le texte verticalement mais les hauteurs des cases sont différentes.

Voici mon HTML

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <div class="box">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

Et mon CSS:

.container {
  margin-top: 15px;
}
.box {
  background-color: grey;
  padding: 15px;
}
htmlcsstwitter-bootstrapflexboxbootstrap-4
3
Elaine Byene

En gros, cette la question a déjà été répondue .

Utilisez flexbox et justify-content-center pour centrer la box et h-100 pour height:100%...

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

_ { https://www.codeply.com/go/VsyNMHZ8VG } _

Ou si vous souhaitez appliquer les mêmes modifications à .boxà la place d'utiliser les classes Bootstrap ...

https://jsfiddle.net/g38e9Lfm/

.box {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
5
Zim

Vous pouvez ajouter des classes de démarrage standard et ne pas écrire de css supplémentaire

 <div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 1</h6>
          <p>A small description</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 2</h6>
          <p>A bigger description goes here</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 3</h6>
          <p>A large description is placed here to make whatever changes we need.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Démo

3
Den Potapov

Changer la classe align-item-center pour row-eq-height Plus d'infos: http://getbootstrap.com.vn/examples/equal-height-columns/

Pour comprendre, vérifiez: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Et si vous voulez centrer verticalement, vous pouvez utiliser le code suivant:

    .box {
      background-color: grey;
      padding: 15px;
      height: 100%;
      display: flex;
      flex-wrap:wrap;
      align-items: center;
      align-content:center;
      text-align:center;
      justify-content: center;
    }
0
Ivan Iyari

Voici une approche, espérons que cela vous aidera.

.box{
  background-color: grey;
  padding: 15px;
  height: 200px; 
  display:table;
}

Enveloppez votre partie de texte sous une nouvelle div avec class = "text", puis ajoutez css

.text{
display:table-cell;
vertical-align:middle;
}
0
Ash