Text within component won't align vertically-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

You can solve this problem by applying the display: table style to the container and the display: table-cell style to the <h1> element.

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

    /* Added the following style */
    display: table;
}

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

    /* Added the following styles */
    vertical-align:middle;
    display:table-cell;
}

<div >
    <h1>Title</h1>
</div>