将h1以div为背景颜色居中

Question

I'm having trouble aligning my h1 tag in the center of my div. The div just displays a block of color and the h1 should fit in the center and right now its sitting at the top.

http://jsfiddle.net/ha632/

HTML

<div id='title' align="center">
    <h1>ExpressWay</h1>
</div>

CSS

#title{
    background-color: #f5f82e;
    height: 20%;
    text-align: center;
}

Answer 1

Your margins are collapsing . You can fix this by adding overflow:auto (or a border like border:1px solid #f5f82e ) to your div:

#title{
    background-color: #f5f82e;
    height: 20%;
    text-align: center;
    overflow:auto;
}

jsFiddle example

Answer 2

Try with this css:

#title{
    background-color: #f5f82e;
    height: 20%;
    text-align: center;
    padding: 10px;
}

h1 {
    margin: 0;
    padding: 0;

}

You can play with padding value of #title.

Answer 3

Give your h1 a line-height or add padding to it.

A better solution would be to just remove the div altogether and apply your styles to the h1 tag instead, unless you have a good reason for the div ?

Example: http://jsfiddle.net/Y6zew/2/