text-alignについての考察

7765 ワード
テキストリンク
  • text-alignは行内要素にのみ使用できることを学びました.
  • しかし、block要素で置き換えられたspanラベルのtext-alignが受け入れられ、混乱が現れた.( 対応するコード )
  • https://www.codeit.kr/community/threads/10663
  • の記事を読むと、親のラベルの内容(子供を含む)がソートされ、このような記憶がより正確であることが分かった.
    (親がblockなのかinlineなのかは関係ないようです)
  • コードで確認しました.
    • <html lang="ko">
    <head>
        <style>
            .parent {
                text-align: center;

                background-color: #eee;
            }

            .child2 {
                background-color: green;
            }

            .child3 {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <span class="parent">
            가나다라
            <span class="child2">ABCD</span>
            <div class="child3">1234</div>
        </span>
        <br /><br /><br /><br />
        <div class="parent">
            가나다라
            <span class="child2">ABCD</span>
            <div class="child3">1234</div>
        </div>
    </body>
</html>
  • text-align:center応用前
  • テキスト-align:centerを適用した後
  • したがって、親text−alignは、すべてのインラインをソートし、spanする.parentについては「ganadara」と「ABCD」はinlineであり、すでに自分の分野でcenterである.
  • を参考にchild 3の背景色を消すとこうなります.
    -text-align:centerを適用する前に

    この場合child 3は親から離れたと考えられますか?
    -text-align:centerを適用した後
  • 結論:親にtext-align:centerを適用すると、子供たちはそれぞれ固有の空間の中で真ん中に並ぶ.
    • 🐼[JAVA]大げさ🐼
    junitマルチポリシーテスト切り替え