css_html/css_WEB-ITnose の水平方向の中央揃えについて

昨夜遅くに CSS の垂直方向のセンタリングについて書きました。今夜はその兄弟記事である CSS の水平方向のセンタリングについて書きます。 。 …^^

実は、これら 2 つは元々一緒に書くこともできましたが、混乱を避け、アイデアをより明確にするために、最終的には別々に書いた方が良いと判断しました。 。 。これは、将来のレビューにも役立ちます~~

まず、text-align

なぜ最初に text-align を書く必要があるのですか?

実際には、理由はありません。 。 。 。 。 (殴らないでください)

しかし、text-align は非常に魔法のようなものです。ie6 で text-align を使用すると驚くでしょう

Text-align はテキストの中央揃えを意味し、ブロックのインラインコンテンツを整列させます。したがって、通常、text-align はインライン コンテンツに対してのみ機能し、ブロック レベルのコンテンツに対しては機能しません。

しかし、ie は魔法のようなものであり、非常に意志的なものです。 。 。 IE6 および IE7 の混合モードでは、text-align:center を使用してブロック レベルの要素を中央に配置できます。 。 。すごい！ただし、他のブラウザではインライン要素でのみ機能します。

2番目に、margin

ブロックレベルの要素をセンタリングするという点では、margin: 0 auto を使用するのが理想的な方法だと思います。通常はこの方法を十分に使用しているため、ここでは説明しません。詳細を説明します

一部の友人は要素または複数の列を整列させるために float を使用しますが、float を設定して中央に配置したい場合、要素を中央に配置するには、負の margin を使用するか、float を指定します。コンテナを要素化し、マージンを使用します。

三、負のマージンを使用する

CSS の垂直方向の中央揃えの問題では、ブロックレベルの要素を垂直方向に中央揃えするために負のマージンを使用するという問題があるため、当然、負のマージンを使用することもできますブロック レベルの要素は水平方向に中央揃えになります

最初に位置を設定します: 絶対、次に要素を 50% オフセットします: left: 50%、最後に逆に margin-left を使用します。ブロック レベル要素の幅の半分に等しい margin-左: -1/2height 要素を水平方向に中央揃えにすることができます

位置について: abs の変位参照要素については多くは言いませんが、分からない場合は CSS の垂直方向の中央揃えを参照してください。かなりわかりやすく説明できたと思います。 。 。ははは

4 番目に、flexible-box を使用します

これも前の記事で説明した方法です。少し面倒なので、方法だけを説明します

まず、要素をフレックスボックスコンテナの中央に配置します: -webkit-display:box そして、要素を水平方向に中央に配置するために box-pack:center を設定します

理解できない場合は、格納可能なボックスの基礎知識を検索してくださいが、このスタイル携帯電話での閲覧が多くなります。 上記のデバイスの互換性はあまり良くありません。

余談:

非常に驚くべきことに、水平方向のセンタリングと垂直方向のセンタリングには 4 つの方法があります。将来、他の水平方向のセンタリングに遭遇した場合、このセンタリング方法についてはこの記事を更新します。時々。

私はフロントエンドの初心者なので、欠陥は避けられません。気に入らない場合は専門家を批判しないでください^^

この記事はオリジナルの作品であり、無断転載を禁じます。 。 ありがとう！