CSS 水平方向中央揃えの概要_html/css_WEB-ITnose

まえがき

多くの投稿を読んだ後、初心者がすぐに始めることを直接可能にする中央揃えのレイアウトは存在しないことがわかりました。そこで、私のちょっとした中央寄せレイアウトの蓄積とも言えるまとめを、初心者にもすぐに使えるようにまとめてみました。

1. 要素の分類

1. インライン要素

インライン要素は、インライン要素とも呼ばれ、複数の要素を 1 行に表示できます。注: 要素の高さ、幅、上下の余白は設定できません。要素の高さと幅は、要素に含まれるテキストまたは画像の高さと幅になります。

インライン要素には次のものが含まれます:

、、
、、、、、、< ;var>、、

もちろん、次のコードを使用してブロック レベルの要素に変換できる場合もあります:

display: block;

2. ブロック レベルの要素

ブロックレベルの要素、占有 1 つの行に、他の要素は別の行に配置する必要があります。注: 要素の高さ、幅、および上下の余白を設定できます。要素の幅が設定されていない場合は、親コンテナの 100% になります。

ブロックレベルの要素には、

、

、

...

、

、
、

、が含まれます。 、

、

、

同様に、次のコードを使用してブロックレベル要素をインライン要素に変更することもできます:

display: inline;

3.はじめに

インライン ブロック要素はインライン要素と似ており、1 行に表示できます。注: 要素の高さ、幅、行の高さ、上下の余白はすべて設定できます。

インライン ブロック要素には次のものが含まれます: 、

display: inline-block;

2. 左右のマージン適応メソッドを使用します: margin: 0 auto; /*このメソッドを使用するには、インライン ブロック要素になる必要があり*、固定幅が必要です*/

b. 左マージン メソッドと右マージン メソッドも使用します:

width: 500px

height: 30px; :relative;

margin-left: 50%;

left: -250px; /*250px は要素の幅を 2 ​​で割ったものであり、配置する必要があります*/



c。 center; / *このメソッドを使用するにはインライン要素になる必要があります*/

d。幅が不確かな要素の場合は、テーブルに margin: 0 auto; を使用できます。 center:

table{

margin: 0 auto;

HTML code:

>

したい水平方向に中央揃えにしてください！

e. 幅が不定の要素の場合は、親要素の Position を指定して、left: -50% と left: 50% をそれぞれ設定し、水平方向の中央揃えを実現します。 .father{

位置: 相対;

左:50%;

幅: 960px;

高さ: 300px;

背景: yellow;

}

.children{

高さ: 30px;

背景:#ccc;

位置: 相対;

left:-50%;

}

HTML コード:

aaaaaaaa















声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ツールヒント (svg を使用して動的なダイアログ ボックスを作成する)_html/css_WEB-ITnose次の記事：ツールヒント (svg を使用して動的なダイアログ ボックスを作成する)_html/css_WEB-ITnose

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）