CODEWITHSUNDEEP
htmlcssheaderstylesheet
Filip Bartuzi
Filip Bartuzi

Reputation: 5931

Center a H2 inside a div element

I want to center h2 inside #top but vertical-align:middle doesn't work... I have no idea what to do!

#top {
    display: block;
    position: relative;
    height: 100px;
    background-color: rgba(89,144,222,.6);
}
#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
    font-size: 50px;
}

effect is - http://puu.sh/2mz5M

Upvotes: 2

Views: 9279

Answers (3)

Avin Varghese
Avin Varghese

Reputation: 4370

Give a fixed height and line-height to vertically align and text-align: center to center the text.

#top {
    position: relative;
    height: 100px;
    line-height: 100px;
    background-color: rgba(89,144,222,.6);
}

    #top h2{
        text-shadow: 2px 2px black;
        text-align: center;
        color: white;
        font-family:"Impact";
        font-size: 50px;
    }

Jsfiddle : http://jsfiddle.net/XvFCT/

Upvotes: 0

ceruleus
ceruleus

Reputation: 704

I see, you have height defined for div, which is great for this situation. You can do this:

#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
    font-size: 50px;
    line-height: 100px;
}

Upvotes: 6

ftpaul
ftpaul

Reputation: 1

It should work if you set the line-height of the div. See Method 2 here:

http://phrogz.net/css/vertical-align/index.html

Upvotes: 0

Related Questions