Text in the middle of button - can't center it

Question

http://jsfiddle.net/8zkqu/1/

            <div id="button" class="g">
                <p>Discover me!</p>
            </div> <!-- id button class g -->

and .css file looks like that

#button{

    z-index: 1;
    font-size: 20px;
    border-radius: 5px;
    width: 130px;
    height: 40px;
    position: absolute;
    top:20px;
    right: 20px;
    font-weight:  bold;
    text-align: center;
}
.g {
    background-color: rgb(94,179,74);
    color: white;
    border: 3px solid green;
    position: absolute;


}

Its start to being annoying! How to center text inside buttoN?

Answer 1

I assume you're looking to vertical-align the element ?

Try with display:table-cell

HTML

<div id="button" class="g">
    <span>Discover me!</span>
</div> <!-- id button class g -->

CSS

#button{
    z-index: 1;
    font-size: 20px;
    border-radius: 5px;
    width: 130px;
    height: 40px;
    display:table-cell;
    vertical-align:middle;
    font-weight:  bold;
    text-align: center;
}

.g {
    background-color: rgb(94,179,74);
    color: white;
    border: 3px solid green;
}

JSFiddle.

Text-aling:center centers the element horinzontal and vertical-align:middle vertical.