如何使列中的文本垂直居中 (bootstrap 4)?
How to vertically center a text in a column (bootstrap 4)?
如何使列中的文本垂直居中 (bootstrap 4)?结构基本,见:
<div class="row">
<div class="col-md-6">
<span>Text to center</span>
</div
</div>
伙计们!
您可以将 my-auto class 添加到父 <div class="col-md-6">
以实现此目的。此 class 在 y-axis 上设置了自动边距,有关详细信息,请参阅上面的 link。
看起来像这样:
<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 实用程序,但这些实用程序仅适用于内联、inline-block、inline-table 和 table 单元格元素。
使用 auto-margins (my-auto
),或使用 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
另外,在我的另一个回答中有解释。
如何使列中的文本垂直居中 (bootstrap 4)?结构基本,见:
<div class="row">
<div class="col-md-6">
<span>Text to center</span>
</div
</div>
伙计们!
您可以将 my-auto class 添加到父 <div class="col-md-6">
以实现此目的。此 class 在 y-axis 上设置了自动边距,有关详细信息,请参阅上面的 link。
看起来像这样:
<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 实用程序,但这些实用程序仅适用于内联、inline-block、inline-table 和 table 单元格元素。
使用 auto-margins (my-auto
),或使用 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
另外,在我的另一个回答中有