Выравнивание текста внутри ссылки, внутри div

Question

Я пробовал в течение длительного времени. Но я не могу выровнять часть текста внутри ссылки, которая находится внутри div. Это может показаться действительно запутанным. Это пример того, что у меня есть:

http://jsfiddle.net/caoj5c36/

Как вы можете видеть, когда вы перечисляете над «Pygame» Я хочу, чтобы описание «скоро ..», чтобы быть в центре внутри кнопки.

Любые предложения?

Я попытался с помощью

text-align: center; 

в всевозможных комбинациях HTML тегов в моем CSS скрипт

Answer 1

Это потому, что p абсолютно позиционируется. Это позволяет запускать из потока элементов ... Таким образом, вы будете иметь, чтобы сделать его расширить до ширины родительского a 100%, а затем вы можете использовать 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

Его простой:

#button_layout #info_text { 
    width: 100% 
} 

Так что ваша ссылка имеет ширину дел до центрируйте текст в нем.

Вы не должны использовать идентификаторы, подобные этому. Идентификаторы следует использовать только один раз на странице, вместо этого использовать классы.