Bootstrap 4 texte alignement vertical ne sera pas centré sur la carte

Essayer d'aligner verticalement le centre de texte dans la carte suivante:Bootstrap 4 texte alignement vertical ne sera pas centré sur la carte

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="row text-center h-100"> 
 
    <div class="col-md-3 text-center my-auto"> 
 
    <div class="card card-block justify-content-center" style="height: 120px"> 
 
     <div class="card-body"> 
 
     This is some text within a card body. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Je suis pleinement conscient des nombreuses questions similaires ici, Cependant, j'ai essayé différentes solutions et aucune d'entre elles ne semble fonctionner pour mes cartes.

J'ai essayé "my-auto" sur le parent, la carte et le corps de la carte. J'ai essayé "d-flex align-items-centre h-100" et "justify-content-center". J'ai également essayé de jouer avec la propriété d'affichage. Qu'est-ce que je rate?

Source

2017-10-20 tealowpillow

Voici une solution en utilisant bootstrap 4 documentation pour flexbox. En savoir plus here

Ce que vous devez savoir,

d-flex -> fait l'élément un FlexBox.

align-items-center - aligne verticalement le contenu.

justify-content-center - aligne horizontalement le contenu.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="row text-center h-100"> 
 
    <div class="col-md-3 text-center my-auto"> 
 
    <div class="card card-block d-flex" style="height: 120px"> 
 
     <div class="card-body align-items-center d-flex justify-content-center"> 
 
     This is some text within a card body. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-10-20 21:00:06

Nice. J'ai raté le d-flex dans le corps de la carte, je l'avais auparavant seulement dans la carte de classe. – tealowpillow

@tealowpillow Heureux son fixe! –

Qu'est-ce qui me manque?

line-height:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="row text-center h-100"> 
 
    <div class="col-md-3 text-center my-auto"> 
 
    <div class="card card-block justify-content-center" style="height: 120px; line-height:120px;"> 
 
     <div class="card-body"> 
 
     This is some text within a card body. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-10-20 20:55:46

Malheureusement, cela ne fonctionne pas pour une petite boîte lorsque le texte doit briser. – tealowpillow

Bootstrap 4 texte alignement vertical ne sera pas centré sur la carte

Répondre

Questions connexes