尝试垂直对齐以下卡片中的文本中心：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row text-center h-100">
<div class="col-md-3 text-center my-auto">
<div class="card card-block justify-content-center" style="height: 120px">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
我完全意识到这里有许多类似的问题，但是我尝试了各种解决方案，但似乎没有一个适用于我的卡。
我在父卡、卡体和卡体上尝试了“my-auto”。我尝试了“d-flexalign-items-center h-100”和“justify-content-center”。还尝试使用显示属性。我缺少什么？
这是使用 bootstrap 4 文档的解决方案flexbox。阅读更多here https://v4-alpha.getbootstrap.com/utilities/flexbox/
你需要知道什么，
d-flex-> 使元素成为弹性盒。
align-items-center- 垂直对齐内容。
justify-content-center- 水平对齐内容。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row text-center h-100">
<div class="col-md-3 text-center my-auto">
<div class="card card-block d-flex" style="height: 120px">
<div class="card-body align-items-center d-flex justify-content-center">
This is some text within a card body.
</div>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
