CODEWITHSUNDEEP
csshtml
user3186354
user3186354

Reputation: 55

Vertically aligning a text inside a CSS box

I wanted to make my text that is inside my CSS box vertically aligned on the middle. I tried valign="middle" on the div but it didn't work.
CSS:

        #leadboard
    {
        width: 1300px;
        height: 100px;
        background-color: #dedede;
    }

HTML:

    <div id="leadboard" align="center">
        <h1>Text Here</h1>
    </div>

Upvotes: 0

Views: 68

Answers (2)

Yohann Tilotti
Yohann Tilotti

Reputation: 165

Like this :

#leadboard
{
    width: 1300px;
    height: 100px;
    background-color: #dedede;
    display: table;
}
#leadboard h1
{
    display: table-cell;    
    vertical-align: middle;
}

or

#leadboard
{
    width: 1300px;
    height: 100px;
    background-color: #dedede;
    line-height: 100px;
}

Upvotes: 1

Iqbal Kabir
Iqbal Kabir

Reputation: 1630

If your text is one line -

#leadboard {
    line-height: 100px; /* Equal to height */
}

If your text is several lines -

#leadboard {
    display: table;
}
#leadboard h1 {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 1

Related Questions