Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading