Bootstrap 4在div中垂直居中放置文本 [英] Bootstrap 4 vertically center text in 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屋！