センタリングメソッド_html/css_WEB-ITnose

今日、Web ページを書いているときに、センタリングが頭の痛い問題であることがわかったので、インターネットを通じてセンタリングの問題を解決するために現在知っている方法と私自身の使用法をまとめました。

1.text-align: center

親要素に設定する必要があります。テキスト要素またはインライン要素のみにすることができ、浮動要素にすることはできません。 親要素に設定する必要があります。テキスト要素とインライン要素のみです

.div1{            text-align: center;        }<div class="div1">    <span>text-alignf</span></div>

4.position

まず、親要素と子要素の位置をそれぞれ書き込み、幅と子要素を設定します。親要素と子要素の高さ、次に、top: 50%; left: 50%; および margin-top: 子要素の高さの半分を書き込みます。 margin-left: 半分の負の数。重量値。 (原則として、まず子要素を親要素の幅と高さの 50% に配置し、次に子要素の幅と高さの半分を減算します)

.div2 div{            margin: 0 auto;        }<div class="div2">    <div>        <p>margin</p>    </div></div>

5.inline-block

親要素は text-align :center を設定し、その下の要素は display:inline-block を設定することで中央に配置できます (親要素のインライン要素とそれ自体のブロックレベル要素になります)

.div3{            line-height: 200px;        }<div class="div3">    <span>line-height</span></div>