>>>征服中央揃え<<


1.Block要素


text-aline: center;


ブロック要素または表のセル・ボックスの水平方向の配置を設定します.
text-alignのcentt,right,left valueは行内の内容をソートします.
ではdiv>div内のtxtはソートできませんか?いいえ.
txt自体が行内要素なのでソートできます.
重要なのはtext-alignを適用したdivのdivが中央に位置合わせできないことです!ここで、txtのみが属するブロック要素の中で中央に位置します.

親divでtext-alin:center;与えられた状態

blockにwidth値を与え、marify:auto use


composition:絶対値と余白値の使用


すべての水平垂直位置合わせをしてみます.
親divと子divが存在すると仮定すると、
親divでの合成:相対;値段をつける
child divで合成:absolute;値が指定されている場合は、divの左上隅の頂点ごとにtop、bottom、left、right propertyが適用されます.

ただし、child divのwidthとheight値が存在する必要があります.
<style>
.childDiv {
  top: 50%; 
  left: 50%; 
  margin-top: -((childDiv의 height)/2)px; 
  margin-left:-((childDiv의 width)/2)px;
}
</style>
出典:https://88240.tistory.com/391[振動blog]
これによりmargin値を水平および垂直に位置合わせできます.

display:table,tablecellを使用する


この方法を使用するかどうかはわかりませんが、tableはtext-alignも適用されるので、display値を変更することで中央ソートができます.
ここで確認https://saimplay.tistory.com/115

2.行内要素


inline要素はblockの中央ソート方法を直接適用しません.

ブロックの中央ソート方法の取得

  • <div>で縛ります.

  • display: inline-block;値をつける.