Aligning text inside a link, inside a div

Question

I have been trying for a long time.. But I can not align a section of text inside a link, which is inside a div. This may sound really confusing. This is an example of what I have:

http://jsfiddle.net/caoj5c36/

As you can see when you scroll over "Pygame" I want the description "Coming Soon.." to be centered inside the button.

Any suggestions?

I have tried using

text-align: center;

in every possible combinations of html tags in my css script

Answer 1

It's because p is absolutely positioned. It makes it run out of the flow of the elements... So, you'll have to make it expand to 100% width of the parent a , and then you can use text-align: center

Updated JsFiddle

#button_layout #info_text {
    /*description is invisible until hover */
    font-size: 16px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

Answer 2

Its simple:

#button_layout #info_text { 
    width: 100% 
}

So your Link has the width of the div to center the text in it.

You shouldn't use IDs like this. IDs should only be used once on a page, use classes instead.