как центрировать контент внутри карты - bootstrap

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

Вы можете просмотреть пользовательский интерфейс, о котором я говорю, здесь obedient-pan.surge. sh

У меня проблема с картой "Ваши награды" справа

Answer 1

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

Answer 2

В этой строке есть класс d-flex: <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">.

Это добавит атрибут display: flexbox; к вашему элементу div.

Вы можете добавить justify-content-center класс в нем, чтобы заставить его центрировать содержимое во флексбоксе.

Более того, если вам вообще не нужно, чтобы он действовал как флексбокс, не стесняйтесь удаленно удалять класс d-flex.

Проверьте # justify-content часть bootstrap документов

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