Vertically aligning a text inside a CSS box

Question

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>

possible duplicate of [Text vertical align in a div](http://stackoverflow.com/questions/9249359/text-vertical-align-in-a-div) — Hashem Qolami, Mar 15 '14 at 21:19
Well, I actually did a lot of search and I didn't find anything for what I am asking right now. — user3186354, Mar 16 '14 at 16:10

score 1 · Answer 1 · answered Mar 15 '14 at 19:50

1

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

answered Mar 15 '14 at 19:50

Iqbal Kabir

1,518
10
16

Yohann Tilotti · Answer 2 · 2014-03-15T20:00:58.803

1

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

edited Mar 15 '14 at 20:00

answered Mar 15 '14 at 19:50

Yohann Tilotti

165
9

Thank you. Can you please tell me what display: table-cell does? – user3186354 Mar 15 '14 at 19:53
It's the property to display like a table cell and replace the property valign which is not supported in HTML5. – Yohann Tilotti Mar 15 '14 at 19:59

Vertically aligning a text inside a CSS box

2 Answers2