CSS: центрирование абсолютного позиционного текста внутри относительного родителя

Question

Как можно центрировать абсолютный позиционированный текст внутри жидкости относительно родителя? Я пытаюсь использовать text-align:center на родительских элементах, но он всегда центрирует левый угол ребенка, а не сам элемент.

http://jsfiddle.net/sucTG/2/

Answer 1

Дело в том, что position:absolute; изменяет ширину элемента, чтобы соответствовать его содержанию и что text-align: center; центры текст в ширину элемента блока. Поэтому, если вы добавите position: absolute;, не забудьте увеличить ширину элемента, иначе свойство text-align: center; будет бесполезным.

Лучший способ решить это - добавить width: 100%; и left: 0px; в разделе .text.

http://jsfiddle.net/27van/

Answer 2

Update: То, что я ставлю перед плохо/неправильно

http://jsfiddle.net/brJky/1/

Это должно быть гораздо ближе к тому, что вы хотите?

Ваш текст относительно и ваши другие элементы внутри контейнера абсолютно!

.text { 
    color:#fff; 
    padding:50px 0; 
    display:block; 
    position:relative; 
} 

.absolute { 
    background:#f0f; 
    height:25px; width:25px; 
    position:absolute; 
    top:36px; left:50%; 
}