CSS を使用して要素を水平方向と垂直方向に中央揃えにする方法_html/css_WEB-ITnose

記事が役に立ったら、いいねとフォローをお願いします。これが私の最大のモチベーションになります、ありがとうございます

1. 水平方向のセンタリング

1.1. テキスト、画像、インライン要素:

インライン要素またはテキスト画像を中央に配置する場合

1.2. ブロック要素

1.2 .1. 幅が設定されたブロック要素の場合:

margin:0 auto;----------------------左右のマージンを適応させます。通常は中央に配置されます

1.2.2. 幅が設定されていないブロック要素の場合:

1. テーブル タグ html を使用します:

<table>        <tr>            <td>                <div id="container"></div>            </td>        </tr>    </table>

css:

table{     margin:0 auto;}

意味のないタグが追加されるため、一般的には使用されません 2. サブブロックを変換すると、要素はインライン要素になります html:

<div>    <p>居中示例</p></div>

css:

p{     display:inline;}div{     text-align:center;}

p が div 内にあると仮定して、まず p を中心に配置します。 text-align:center を外側の要素に設定します。これは、inline 要素を div 内の中央に配置し、p を inline 要素に変換することを意味します。 3. パス位置html:

<div>    <p>居中示例</p></div>

css:

div{     float:left;       position:relative;      left:50%;}p{     position:relative;       right:50%;}

float:left、目的親要素を左に移動し、子要素と同じ幅にします。その後、元の位置に対して 50% 右側に移動します。このとき、要素の左側は 50% + (50%) になります。親要素自体の幅) に基づいて子要素を移動します。元の位置から 50% 左に移動します (50% は親要素の幅に基づきます)。これで中央に配置されます。

2. 垂直方向の中央揃え

2.1. 高さを設定した単一行のテキストの場合

親要素の高さの値を同じ値に設定するだけです。 line-height

2.2. 高さを設定した複数行のテキストの場合

1. テーブルタグ html:

    <table>        <tr>            <td>                <p>aaaaa</p>                <p>aaaaa</p>                   <p>aaaaa</p>            </td>        </tr>    </table>

css:

table{            height: 500px;            background-color: #aaa;        }

table タグの td にはタグの暗黙的なスタイルがあるため、vertical-align:middle;2. cell html:

   <p>aaaaa</p>   <p>aaaaa</p>      <p>aaaaa</p>

css:

p{     display:table-cell;     vertical-align:middle;}

table-cell は、要素を表のセルのように動作させることを意味します、ただし IE8 のみをサポートします上記のブラウザ