Question

我的用户界面中有一张卡片，但我不知道如何将其中的内容居中

  <div class="col-sm-4 pb-3">
      <!-- Card -->
<div class="card card-image" style="background-color:grey;">

  <!-- Content -->
  <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
    <div>
      <h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
      <h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
      <div class="row">
      <div class="col-lg-6">
        <h3>Option 1</h3>
        <p>SNET</p>
        <button type="button" class="btn btn-primary btn-block px-1" id="reinvest">REINVEST</button>
      </div>
      <div class="col-lg-6">
        <h3>Option 2</h3>
        <p>AGI</p>
        <button type="button" class="btn btn-primary btn-block px-1 " id="withdraw">WITHDRAW</button>
      </div>
    </div>

    </div>
  </div>

</div>
<!-- Card -->
    </div>
  </div>

问题似乎出在ipad和ipad pro上的卡上，这些按钮没有留着

您可以在此处查看正在讨论的UI obedient-pan.surge.sh

我遇到的问题是右侧的“您的奖励”卡

Answer 1

此行中有一个d-flex类： <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">。

它将在您的div元素中添加属性display: flexbox;。

您可以在其中添加一个justify-content-center类，以使其以flexbox的方式居中放置内容。

此外，如果您根本不需要它像Flexbox一样，请随时远程访问d-flex类。

检查#justify-content part of bootstrap docs

 <div class="col-sm-4 pb-3">
      <!-- Card -->
<div class="card card-image" style="background-color:grey;">

  <!-- Content -->
  <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 justify-content-center">
    <div>
      <h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
      <h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
      <div class="row">
      <div class="col-lg-6">
        <h3>Option 1</h3>
        <p>SNET</p>
        <button type="button" class="btn btn-primary btn-block px-1" id="reinvest">REINVEST</button>
      </div>
      <div class="col-lg-6">
        <h3>Option 2</h3>
        <p>AGI</p>
        <button type="button" class="btn btn-primary btn-block px-1 " id="withdraw">WITHDRAW</button>
      </div>
    </div>

    </div>
  </div>

</div>
<!-- Card -->
    </div>
  </div>
  
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Answer 2

Just add this css into your css File, it will automatically center the content.

Css::Align-horizontal center

 .text-center {
    display:flex;
    justify-content:center;
    }

Css :::垂直对齐+水平中心

 .text-center {
    display:flex;
    justify-content:center;
    align-items: center;
    }

如何将内容放在卡片引导程序内部

2 个答案: