🔎 Div

次の練習コードに従って1回やれば,ソートの理解度が向上し,cssを用いて位置を調整することはそれほど難しくない.
10分で終わりますから先にやりましょう
まず、水平に整列したいdivのclassをdot、1つのdivをdot-wrapperと呼び、整列したdivを囲む.

👉 dot

<div class="dot">1</div>上記のコードを作成します.

.dot{
    width: 100px;
    height : 100px;
    background-color: orangered;
    color: white;
    font-size: 3rem;
}

このようにcssを設定すると、次のような形になります.

フォント3 remを変更しdot divのテキスト要素を中央に配置するには、次の内容をcssに追加します.

line-height: 100px;
text-align: center;
margin: 0 auto;

line-height所属するdivの高さと同じであれば、上下の中間に位置し、margin 0 auto~0が上下、autoが左右であることを示す.したがって,開発者ツールで確認すると,上下に利益はないが,左右に利益がある.

👉 dot-wrapper

dotパッケージを追加しhtmlを変更しようとします.

<div class="dot-wrapper">
        <div class="dot">1</div>
        <div class="dot">2</div>
        <div class="dot">3</div>
        <div class="dot">4</div>
        <div class="dot">5</div>
</div>

css設定を行わないとdot divは垂直に配置されます.
divはブロック要素なので、レイヤを使用します.
dot-wrapperを600 pxに設定し、中の要素を中央に位置合わせするには、inline blockをdotに適用する必要があります.

.dot{
    width: 100px;
    height : 100px;
    background-color: orangered;
    color: white;
    font-size: 3rem;
    line-height: 100px;
    text-align: center;
    display: inline-block;
}

上記のようにdotのcssを変更すると、dotは行内属性を持つブロック要素になるので、左から順にブロックが積み重ねられます.
したがって、dot−wrapperのcssにtext-align:centerが適用されると、dotクラスはinline属性に基づいて中央に並べ替えられる.

ブロック要素間に空白が表示されるのは、ブロックがinline属性を有し、テキスト化されているためです.divラベルの間にenterが入っているため、スペースとして認識され、小さなスペースが生成されます.divラベルを1行に並べて、1行おきに書く必要がない場合、これらの空間は消えます.