😸
要素の位置
水平方向の位置
- text-alignは、ブロック要素を左寄せ、中央寄せ、右寄せにできます。
- marginプロパティで左右にautoをしてすると、ブロック要素が中央寄せになります。
- flexboxは、インライン要素でもブロック要素でも横方向に動かせます。
-
CSSで要素を右寄せする方法！画像やボタンの右寄せを徹底解説
-CSSで要素を上下や左右から中央寄せする7つの方法
垂直方向の位置
- text-align:center
- heightプロパティとline-heightプロパティの値を同じにする。
- positionプロパティ
親要素にposition:relativeを指定し、子要素にposition:absoluteを指定し、top:50%,left:50%で移動します。子要素の左上が中央に来ているので、transform:translate(-50%,-50%)で親要素が中央に位置する。 - flexbox
-CSSで文字を上下左右中央に配置する方法いろいろ
-vertical-alignが効かない時
-CSSで要素を上下や左右から中央寄せする7つの方法
##要素が横並びにならない
htmlが改行されていると、要素の後ろにmarginでは消せない余白が存在する。
解決策
- 親要素にletter-spacing:-1emを指定する。一文字分の空間を削除できる。
- flexboxを用いる。
-inline-blockで横並びする方法【横並びにならない対処法】
擬似要素
擬似要素の位置を元の要素の任意の位置に置くには、親要素にposition:relative、子要素にposition:absoluteを指定します。ただし、子要素にcontentプロパティを用いなければなりません。
Discussion