如何垂直居中列中的文本（引导程序4）？

Question

如何垂直居中列中的文本（引导程序4）？结构是基本的，参见：

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

Ty guys！

Answer 1

您可以将my-auto类添加到父项<div class="col-md-6">以实现此目的。该类在y轴上设置自动边距，请参阅上面的链接了解更多详细信息。

它应该是这样的：

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

你也许会使用vertical alignment工具，但这些只能在在线，内联块，内联表，表单元格工作元素。

Answer 2

另一种选择是使用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

另外，还有一些several other Bootstrap vertical centering options我在其他的答案解释。