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.

Answer 2

This update to the CSS should do the trick:

.g p {
    margin: 0;
    line-height: 40px;
}

Working Example

Answer 3

Add this to your css:

#button p{    
margin: 0px;
line-height: 40px;
}

Margins are added to <p> elements by default, the code above removes them. And line-height centers the text in the button, to achieve this in the future set the line-height to be equal to the button height.

Answer 4

Another option: Add this to your CSS:

#button p{
     line-height:0px;
}