Issue with vertical centering of text

Question

I am having an issue getting text to be centered vertically within a div. I've tried both CSS and bootstrap options, but not having luck. The closest that I get is with using align-items: center, however, the test is still offset from what should be middle.

Current code:

.code-quote {
  max-width: 70%;
  height: 40px;
  background-color: #707793;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-text {
  font-size: 1.5rem;
  color: #3BBA9C;
}

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

<div class="row">
  <div class="col">
    <div class="code-quote mx-auto">
      <h3 class="code-text">This is my text</h3>
    </div>
  </div>
</div>

This is what I get:

If I remove the align-items: center, then it's much closer to the top of the element.

You shouldn't be writing your own CSS to do what [Bootstrap provides](https://getbootstrap.com/docs/4.5/layout/grid/#vertical-alignment) out of the box. — isherwood, Jul 15 '21 at 21:05
@Ismail I did try that class after finding it in Bootstrap's documentation and was unable to get it to do anything. — JVX, Jul 15 '21 at 21:13

score 2 · Answer 1 · answered Jul 15 '21 at 21:12

Bootstrap provides all the alignment and flex stuff you could ask for. Have a look at the docs.

Also note my adjustment to margin on the heading element.

.code-quote {
  max-width: 70%;
  height: 40px;
  background-color: #707793;
}

.code-text {
  font-size: 1.5rem;
  margin-bottom: 0;
  color: #3BBA9C;
}

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

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="code-quote mx-auto d-flex flex-column 
        align-items-center justify-content-center">
        <h3 class="code-text">This is my text</h3>
      </div>
    </div>
  </div>
</div>

Thank you very much for the reply. I did read through the documentation on their website and tried using their classes before custom CSS, but couldn't get it to work. The margin-bottom that you wrote in was what I was missing. — JVX, Jul 15 '21 at 21:21

score 2 · Accepted Answer · answered Jul 15 '21 at 21:13

The h3 element has a bottom margin by default. Adding margin: 0 might do what you're after:

.code-quote {
  max-width: 70%;
  height: 40px;
  background-color: #707793;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-text {
  font-size: 1.5rem;
  color: #3BBA9C;
  margin: 0;
}

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

<div class="row">
  <div class="col">
    <div class="code-quote mx-auto">
      <h3 class="code-text">This is my text</h3>
    </div>
  </div>
</div>

Issue with vertical centering of text

2 Answers2