Wie zentriert man einen Text in einer Spalte vertikal (Bootstrap 4)?

Question

Wie zentriert man einen Text in einer Spalte (Bootstrap 4)? Die Struktur ist einfach, siehe:

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

Ty Leute!

Answer 1

Sie können die Klasse my-auto dem übergeordneten <div class="col-md-6"> hinzufügen, um dies zu erreichen. Diese Klasse legt automatische Ränder auf der Y-Achse fest. Weitere Informationen finden Sie im obigen Link.

Es würde wie folgt aussehen:

<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>

Sie könnten vertical alignment Dienstprogramme zu verwenden versucht sein, diese werden aber nur auf Inline arbeiten, inline-block, inline-table und Tabellenzelle Elemente.

Answer 2

Eine weitere Option ist die Flexbox Dienstprogramme zu verwenden ..

<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

Auch gibt es several other Bootstrap vertical centering options in meiner anderen Antwort erklärt.