😸

要素の位置

2024/02/03に公開

水平方向の位置

垂直方向の位置

  • 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では消せない余白が存在する。
解決策

擬似要素

擬似要素の位置を元の要素の任意の位置に置くには、親要素にposition:relative、子要素にposition:absoluteを指定します。ただし、子要素にcontentプロパティを用いなければなりません。

Discussion