コレクションはどのように中央に位置合わせCSS

1478 ワード
translate text-align:center CSS Center 中央揃え margin:auto line height テキストリンク

🥯 margin: auto



水平方向にしか整列できず、垂直方向には整列できません.
たとえば、divはブロックレベルです.
デフォルトは
これは、2つのエッジが同じ間隔で自動的に調整されるためです.

🥯 text-align: center



text以外の要素を中央に揃えます.
divはブロックレベルなので、行ごとに1つしか表示されないので、デフォルトでは余白が適用されます.そのため、中央に位置合わせするには、余白:autoを適用する必要があります.
水平方向にしか整列できず、垂直方向には整列できません.

🥯 translate(50%, 50%)


transform : translate(50%, 50%)%を使用する場合は、自己基準で計算します.つまり、自分の幅と高さの50%に移動します.
したがって、移動親要素の50%を指定する必要があります.
position: absolute;
top: 50%
left: 50%

(この状態では、以下のようにtranslateに移動して中央揃えを行うことができます.)transform: translate(-50%, -50%)

🥯 Text centering



🍞 text-align


🍞 line-height

text-align: center; line-height: <부모상자 높이>line-heightは行の高さを指定します.
Jpeg回転bmp
JavaScript #17