web-dev-qa-db-fra.com

Comment centrer verticalement un texte dans une colonne (bootstrap 4)?

Comment centrer verticalement un texte dans une colonne (bootstrap 4)? La structure est basique, voir:

<div class="row">
    <div class="col-md-6">
        <span>Text to center</span>
    </div
</div>

Merci, mes amis!

bootstrap-4twitter-bootstrap-4
11
Angelo Merlo

Vous pouvez ajouter la classe my-auto au parent <div class="col-md-6"> pour y parvenir. Cette classe définit des marges automatiques sur l'axe des y, voir le lien ci-dessus pour plus de détails.

Cela ressemblerait à ceci:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6 my-auto">
      <span>Text to center</span>
    </div>
    <div class="col-xs-6">
      <h1>Hello</h1>
      <h1>Hello</h1>
      <h1>Hello</h1>
    </div>
  </div>
</div>

Vous pourriez être tenté d'utiliser alignement vertical les utilitaires, mais ceux-ci ne fonctionneront que sur les éléments inline, inline-block, inline-table et cell cell.

32
Pascal Martineau

Utilisez les marges automatiques (my-auto), ou utilisez les utilitaires flexbox ..

<div class="container">
    <div class="row">
        <div class="col-md-6 align-self-center">
            <span>Text to center</span>
        </div>
        <div class="col-md-6">
            <p>
            ..
            </p>
        </div>
    </div>
</div>

http://www.codeply.com/go/oy8H1bUOL1

En outre, il existe plusieurs autres options de centrage vertical Bootstrap expliquées dans mon autre réponse.

8
Zim