Bootstrap 4在div中垂直居中放置文本 [英] Bootstrap 4 vertically center text in div
本文介绍了Bootstrap 4在div中垂直居中放置文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个简单的HTML代码(带有Bootstrap):
I have this simple HTML code (with Bootstrap) :
<div id="accordion">
<div class="card">
<div class="card-header" id="@itm.Id">
<div class="row">
<div class="col-2 border rounded text-center">
text to center
</div>
<div class="col-2 border rounded text-center">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute
</div>
</div>
</div>
</div>
</div>
我只想在div中将文本文本居中"垂直居中,使边框保持在示例中(不降低高度).
I just want to vertically center the text "text to center" in the div, keeping the border as it is in the exemple (no height decrease).
我尝试过my-auto
或align-items-middle
之类的东西,也阅读过之前提出的问题,但没有成功.
I have tried things such my-auto
or align-items-middle
, also read questions asked before, but without success.
如果可能的话,我不想添加类(使用现有的引导程序).
If possible I don't want to add classes (use existing bootstrap).
这是小提琴:垂直居中文本
推荐答案
您可以在Bootstrap中使用Flex box预定义类:
You can used Flex box predefine class in Bootstrap for that:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordion">
<div class="card ">
<div class="card-header" id="@itm.Id">
<div class="row">
<div class="col-2 border rounded justify-content-center d-flex align-items-center">
text to center
</div>
<div class="col-2 border rounded text-center"> ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
</div>
</div>
有关信息,您可以在此处阅读.
For Information you can read here.
这篇关于Bootstrap 4在div中垂直居中放置文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文