Placing 2 lines of text in the centre of a div container

Question

I have done a little research but my few hours of CSS/HTML and being in a hurry to get this done, has landed me here.

"MAY" is where it should be, but I can't seem to get the year to be visible under it. I know this is obviously due to line height but I don't know how else to do this.

<style>
    .yellowbox {
        height:77px;
        width:65px;
        background-color: #FFC104;
        text-align: center;
        font-weight: 700;
        color:#fff;
        line-height: 77px;
    }
</style>
    
    <div class="yellowbox">
        <div>MAY</div>
        <div>2022</div>
    </div>

Answer 1

update your css and add .yellowbox > div {text-align: center;}

Provide a screenshot or codepen example so we can see more clearly what your issue is.

L

Answer 2

Is this what you mean? Hope this help!

.yellowbox {
    height:77px;
    width:65px;
    background-color: #FFC104;
    text-align: center;
    font-weight: 700;
    color:#fff;
    /* added this 3 lines below */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    <div class="yellowbox">
        <div>MAY</div>
        <div>2022</div>
    </div>