テキスト整列：センター、絶対-位置付け子には、左のように振る舞う：50％

Question

私はtext-align: centerと親の内部position: absoluteインライン子供を持っている場合は、私が実際にdiv要素を中心とするのではなく、left: 50%を書いていたかのように結果が正確です。

これは2つが一緒に使用されることを意図していないため、これは異常なケースですが、私はそれらをプロダクションのために使用するつもりはありませんが、なぜこれが当てはまるのか理解しようとしています。

CodePen

.centered, 
 
.positioned { 
 
    border: 1px solid blue; 
 
    margin-bottom: 20px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
} 
 

 
.centered .child, 
 
.positioned .child { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    display: inline-block; 
 
} 
 

 
.positioned .child { 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
}

<div class="centered"> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="positioned"> 
 
    <div class="child"></div> 
 
</div>

あなたがleft: 50%を使用するときは、負のマージン左半分の要素の幅と等しくする必要があるか、あなたは、DOMので、-50％の変換必要親の50％に左端を配置しています。つまり、divは中央揃えではなく右詰めです。

親の場合はtext-align: center、子の場合はposition: absoluteと同じように動作します。 text-align: centerは子供の幅を考慮に入れられないのですか？たとえそれが特別に設定されていても？

Answer 1

これは、少なくともChromeで、意図的なように見えることknown issueです：破損が先に問題を修正しましたhttp://wkrev.com/126911によって引き起こされた

、およびコミット（それが参照するとコミット/バグ）によりますこれは意図的な動作で、ウェブサイト自体にエラーが発生します。

パッチの作成者であるRobert Hogan氏に話すと、ここで何が起こるべきかが完全にはっきりしていないため、CSS 2.1のどこに定義されているのかわかりません。これは、CSS 2.1のセクション9.7あたりのブロックレベルを1行に配置する絶対配置された要素を配置するかどうかにかかっています。 WebKitにはかなりの機械があるので、その動作は間違いなく意図的です。

さらに、FirefoxはChromiumと同じ機能を持ち、http://m.csl-sofas.co.ukと同じ結果を示しています。私は今夜​​OperaとIEをテストすることができます。私たちは他のブラウザと同じように私はウェブサイトがそれを修正する必要があると言いたいと思うだろうが、私はまだどこに仕様が定義されているか分からない。

これを調べている間に、ジョンと私は、計算されたスタイル出力に興味深い不一致を見つけました。すなわち、ブロック：ブロックとインラインブロックの間で反転しながらブロックのレンダリングが変更されても、計算されたスタイル：ブロック、position：absoluteによって暗示されます。

「期待通りに」動作します。

私は、CSSで定義されていない理由は、絶対配置された要素がインラインで決して配置できないため、すべての絶対配置要素がブロックされていると仮定しているからです。絶対配置された要素の表示の値は常に、指定された値のブロックレベルの対応値です。

IE（Microsoft Edgeを含む）以外のすべてのブラウザでこの動作が相互運用可能であるため、CSS-position（現在はCSS2と同じ前提条件になっています）、css-text、css-ディスプレイ、またはそれらの組み合わせを使用することができます。