CSS要素を中央揃えにする簡単な方法を詳しく解説

この記事では、主に CSS 要素の中央配置を詳しく説明する簡単な方法を紹介します: インライン要素、ブロック要素、インライン ブロックの 3 つの状況を紹介します。必要な友達はそれを参照してください

まず、どのような種類の要素があるか知っていますか？

a、span、b、i などのインライン要素（display:inline;） [カスタマイズできないボックス]

[デフォルトのピアは引き続き同じ種類のタグをフォローできます]
[コンテンツサポート幅]
[ワイド幅はサポートされていません High]
[上下のマージンとパディングはサポートされていません]
[コードの改行は空として解析されます]

p、p、h1-h6 などのブロック要素 (display:block;)

【デフォルトは一行表示専用】
【基本的にすべてのcssコマンドに対応】

imgなどのインラインブロック(display:inline-block;) 【imgはとても魔法のようなものです。インラインでもブロックでもなく、インラインブロックです】

【ブロックは一行で表示されます】
【幅と高さをサポート】
【幅がない場合はコンテンツが幅を拡張します】

それでは追加しましょう上記の 3 つの要素を順番にセンタリング

1. 埋め込み要素の単一行テキスト

最も一般的な解決策は、text-align と line-height を使用することです

line-height:200px;   
text-align:center;

しかし、この方法は完全に完璧なのでしょうか?私はそうは思いません（私の強迫性障害について誰かが文句を言うかもしれません）
とにかく、テキストを選択するたびに、テキスト以外の領域も選択されているのを見ると不満を感じますが、IE6-8ではテキストのみが選択されます

2. ブロック要素を中央に配置します

解決策: 位置決め要素 + 負のマージン値を使用します

width:100px;   
height:100px;   
position:relative;   
left:100px;   
top:100px;   
margin-left:-50px;   
margin-top:-50px;

欠点: ボックスの幅と高さを知る必要があります

3 つ目は、インライン ブロックを中央に配置することです

(1) img を背景画像に変換し、background-position:center; を使用します。 ただし、画像へのリンクは一般的に頻繁に変更されるため、これを行う必要があることに注意してください。コンテンツとスタイルの分離の原則?

(2) 補助タグ

html コード:

<img  style=”background-img:url(imgURL)” / alt="CSS要素を中央揃えにする簡単な方法を詳しく解説" >

CSS コード:

<p class="box">  
    <img  src="img.png" / alt="CSS要素を中央揃えにする簡単な方法を詳しく解説" ><span></span>  
</p>

効果:

ナンセンス: img 要素と補助要素を 1 行に分割します。そうしないと、レベルが次のようになります。 incomplete Centered、inline-block を使用する場合、改行はスペースとして解釈されます。実はネット上には他にも、昔から人気のあるテーブル法などの方法があります。ネット上にはたくさんあるのでここでは紹介しません。

以上がCSS要素を中央揃えにする簡単な方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。