如何将一列中的文本垂直居中(引导程序 4)? [英] How to vertically center a text in a column (bootstrap 4)?
本文介绍了如何将一列中的文本垂直居中(引导程序 4)?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将一列中的文本垂直居中(引导程序 4)?结构基本,见:
<div class="col-md-6"><span>文本居中</span></div
伙计们!
解决方案
您可以添加我的-auto 类到父
以实现此目的.此类在 y 轴上设置自动边距,有关详细信息,请参阅上面的链接.
它看起来像这样:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row"><div class="col-xs-6 my-auto"><span>文本居中</span>
<div class="col-xs-6"><h1>你好</h1><h1>你好</h1><h1>你好</h1>
您可能想使用 垂直对齐 实用程序,但这些只会处理内联、内联块、内联表和表格单元格元素.
How to vertically center a text in a column (bootstrap 4)? The structure is basic, see:
<div class="row">
<div class="col-md-6">
<span>Text to center</span>
</div
</div>
Ty guys!
解决方案
You can add the my-auto class to the parent <div class="col-md-6">
to achieve this. This class sets automatic margins on the y-axis, see the link above for more details.
It would look like this:
<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>
You might be tempted to use vertical alignment utilities but these will only work on inline, inline-block, inline-table, and table cell elements.
这篇关于如何将一列中的文本垂直居中(引导程序 4)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!