CSS：相対的な親の内側に絶対配置されたテキストを配置する

Question

親の相対的な親の中に絶対的に配置されたテキストを配置するにはどうすればよいですか？私はtext-align:centerを親要素に使用しようとしていますが、要素自体ではなく、常に子の左隅を中心にしています。

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

Answer 1

事がposition:absolute;がその内容に合わせて、要素の幅を変更することで、素子ブロックの幅内でそのtext-align: center;センターテキスト。したがって、position: absolute;を追加すると、要素の幅を増やすことを忘れないでください。そうしないと、text-align: center;プロパティは役に立たなくなります。

これを解決する最善の方法は、.textセクションにwidth: 100%;とleft: 0px;を追加することです。

http://jsfiddle.net/27van/

Answer 2

アップデート：私は前に置くことだった悪い/

間違っ

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%; 
}