css_html/css_WEB-ITnose を中央揃えにするいくつかの方法

センタリングは水平方向と垂直方向の 2 つのタイプに分けられ、使用頻度も非常に高いので、状況に応じていくつかの一般的な実装方法について説明します。

テキスト内の間違いを修正することは歓迎です。同時に、新しい方法を学んだ場合は、過去を振り返り、将来新しいことを学ぶことができるように、後で更新されます。

1.margin

このメソッドは、固定幅のブロックレベル要素の水平方向の中央揃えのみを実現できます。要素に幅が設定されていない場合、またはブロックレベル要素ではない場合、効果はありません。

/*以div元素为例*/div{    width: 100px;    height: 100px;    margin: auto; /*或者margin: 0 auto;*/}

2.line-height

テキスト行の垂直方向の中央揃えを実現するには、テキストの 1 行の line-height 値をその親要素の高さに設定しますが、その制限も明らかです。

<div id='container'>    <p id='content'>文字内容</p></div>

#container{    height: 30px;}#content{    line-height: 30px;}

3. テーブル

table を使用する場合、td 要素の align:center 属性と valign:middle 属性を使用することで簡単に水平方向と垂直方向のセンタリングを実現できますが、現在の table の使用状況を考慮してください。レイアウト すでに頻度が非常に低く、実際には実用性は強くありません。

<table>    <tr>        <td width='200px' height='200px' align='center' valign='middle'>            <!-- 子元素 -->        </td>    </tr></table>

4.display: table-cell

セルは水平方向と垂直方向の中央に簡単に配置できるため、親要素のコンテナーは、スタイル text-align:center およびvertical-align: middle to を使用してセル要素としてシミュレートできます。同じ効果が得られます。ただし、text-align:center は非ブロックレベルのサブ要素を水平方向に中央揃えすることしかできず、ブロックレベルのサブ要素には影響しないことに注意してください。

<div id="table-cel">    <div></div></div>

#table{    display: table-cell;    width: 200px;    height: 200px;    vertical-align: middle;    text-align: center;}

5. 絶対位置決めと中央揃え

この方法は比較的一般的に使用されますが、子要素の幅と高さが固定である必要があるため、コードには直接触れません。 ❤️