Question

我有这个简单的HTML代码（带有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中垂直放置文本“文本到中心”，使边框保持在示例中（不降低高度）。

我尝试过my-auto或align-items-middle之类的事情，也阅读过之前提出的问题，但没有成功。

如果可能的话，我不想添加类（使用现有的引导程序）。

这是小提琴：Vertically center text

Answer 1

您可以在Bootstrap中使用Flex box预定义类：

<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>

有关信息，您可以阅读here。

Answer 2

尝试将my-auto添加到该行内的第一个div。

<div class="col-2 border rounded text-center my-auto">

https://jsfiddle.net/7zm40xj9/7/

Answer 3

答案是在元素中添加d-flex align-items-center

示例

如果你有这个：

<div class="col-3">

改成这样：

<div class="col-3 d-flex align-items-center>

Answer 4

请使用课程： justify-content-center

Bootstrap 4在div中垂直居中放置文本

4 个答案:

示例