0

I want to center the h4 as well as the button vertically in the center of the page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section class="content">
  <div class="card text-center">
    <div class="card-header">
      <h3 class="card-title">CardHeader</h3>
    </div>
    <div class="card-body" style="height: 300px;">
      <h4>A text above the button</h4>
      <button class="btn btn-primary mt-2 text-center">
      <i class="fa fa-plus mr-1" />
      <span>Add Button</span>
    </button>
    </div>
  </div>
</section>
usersina
  • 1,063
  • 11
  • 28

2 Answers2

1

You can use css flex property like align-items and justify-content to center align your div. Try this

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section class="content">
  <div class="card text-center">
    <div class="card-header">
      <h3 class="card-title">CardHeader</h3>
    </div>
    <div class="card-body d-flex align-items-center justify-content-center" style="height: 300px;">
      <div class="">
      <h4>A text above the button</h4>
      <button class="btn btn-primary mt-2 text-center">
      <i class="fa fa-plus mr-1" />
      <span>Add Button</span>
    </button>
      </div>
    </div>
  </div>
</section>
Anjs
  • 586
  • 4
  • 11
-2

use this

/* in CSS */

float = inline
Razvan Constantin
  • 30
  • 5
  • 1
    The community encourages adding explanations alongisde code, rather than purely code-based answers (see [here](https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers)). – costaparas Feb 10 '21 at 09:59