Text within component won't align vertically

Question

I have a banner component inside of a div using CSS grid and I can't figure out how to vertically center the text. Right now, I can horizontally center it but it is align to the top of the div. I know CSS grid makes vertical-align not work so I tried align-self, place-self and justify-self but none of those worked either. All of the other threads seem to suggest those were solutions. Here is the code:

import React from 'react';
import './Banner.css';

const Banner = () => {
    return (
        <div className="banner-cont">
            <h1>Title</h1>
        </div>
    );
};

export default Banner;

.banner-cont {
    height: 120px;
    width: 100%;
    grid-column: 1 / span 2;

    background-color: #0193fd;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}

.banner-cont h1 {
    color: white;
    text-align: center;
    align-self: center;
    justify-self: center;
    place-self: center;
}

And the result:

How do I resolve this issue?

you need to add display: grid on your .banner-cont, and align-content: center — mok_ku, Jan 12 '22 at 01:31

amlxv · Answer 1 · 2022-01-12T01:39:01.533

1

Add display: grid; to .banner-cont

.banner-cont {
    height: 120px;
    width: 100%;
    grid-column: 1 / span 2;
    display: grid;
    background-color: #0193fd;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Result:

edited Jan 12 '22 at 01:39

answered Jan 12 '22 at 01:24

amlxv

1,610
1
11
18

score 1 · Accepted Answer · answered Jan 12 '22 at 01:34

You seem to be using properties of flexbox and grid without declaring them first. To use properties such as grid-column, justify-content, etc... You first need to declare the display property, whether it's flex or grid. I've added a snippet below for your reference. Read more on flexbox and grid here and here respectively.

Using grid to align h1 to the center of the container:

.banner-cont {
  display: grid;
  background: #0193FD;
  place-items: center;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}

.banner-cont h1{
  color: #fff;
}

<div class="banner-cont">
  <h1>Title</h1>
</div>

Using flexbox to align h1 horizontally:

.banner-cont {
  display: flex;
  background: #0193FD;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}

.banner-cont h1 {
  color: #fff;
}

<div class="banner-cont">
  <h1>Title</h1>
</div>

Text within component won't align vertically

2 Answers2