× 目次 [1]text-align [2]margin [3]absolute [4]flex
前の単語
水平方向の中央揃えはよくある問題です。道はたくさんあるようで、すべての道はローマに通じているようです。しかし、体系的にレビューした後、実際にはいくつかのアイデアを中心に展開します。この記事では、水平方向のセンタリングに関する 4 つのアイデアを紹介します
アイデア 1: 親要素に text-align:center を設定して、インライン要素の水平方向のセンタリングを実現します
子要素の表示を inline-block に設定します。子要素は Inline 要素になります
[注] IE7 ブラウザと互換性を持たせたい場合は、display:inline;zoom:1; を使用して inline-block の効果を実現できます
<style>.parent{text-align: center;} .child{display: inline-block;}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div></div>
ログイン後にコピー
ログイン後にコピー
アイデア 2: 独自の要素で margin: 0 auto を設定して、ブロックレベル要素の水平方向の中央揃えを実現します
[1] サブ要素をテーブルとして表示し、サブ要素をブロックレベル要素にします。同時にテーブルも折り返され、コンテンツによって幅が拡張されます
[注] IE7 ブラウザと互換性を持たせるには、子の構造を
DEMO<に変更できます。 ;/table>
<style>.child{ display: table; margin: 0 auto;}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div></div>
ログイン後にコピー
ログイン後にコピー
【2】子要素の幅が固定されている場合は、絶対配置ボックス モデル属性を使用できます。幅が設定されていない場合、子要素は中央揃え効果を実現します。伸びる
<style>.parent{ position: relative;}.child{ position: absolute; left: 0; right: 0; margin: 0 auto; width: 50px;}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;height: 20px;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div>
ログイン後にコピー
3 つのアイデア: 絶対位置の offset 属性を使用して水平方向のセンタリングを実現する
【 1】translate() 変位関数を使用する
translation 関数のパーセンテージは相対的です独自の幅になるので、left:50%とtranslateX(-50%)を組み合わせるとセンタリング効果が得られます
[注意] IE9ブラウザは
をサポートしていません
<style>.parent{ position: relative;}.child{ position: absolute; left: 50%; transform:translateX(-50%);}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;height: 20px;"> <div class="child" style="background-color: lightblue;">DEMO</div></div>
ログイン後にコピー
【2】relative付き
子要素が絶対に設定されているため、相対オフセット属性はそれ自体に対して相対的なものになります。そのため、相対を使用する場合は、
構造のレイヤーを追加して、その幅を子の幅と同じにする必要があります。 element
[注意] このメソッドは完全に互換性がありますが、HTML 構造を追加します
<style>.parent{ position: relative;}.childWrap{ position: absolute; left: 50%;}.child{ position: relative; left: -50%;}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;height: 20px;"> <div class="childWrap"> <div class="child" style="background-color: lightblue;">DEMO</div> </div> </div>
ログイン後にコピー
ログイン後にコピー
【3】負のマージン付き
マージンのパーセンテージは包含ブロックに対して相対的であるため、
構造を追加する必要があります。幅のデフォルト値は自動なので、マイナスのマージンを設定すると幅も増加します。したがって、現時点では固定幅処理が必要です
[注意] 完全互換ですが、ページ構造と固定幅処理を増やす必要があるため、適用シナリオは限定されます
<style>.parent{ position: relative;}.childWrap{ position: absolute; left: 50%;}.child{ width:50px; margin-left:-50%;}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;height: 20px;"> <div class="childWrap"> <div class="child" style="background-color: lightblue;">DEMO</div> </div> </div>
ログイン後にコピー
ログイン後にコピー
アイデア4: フレキシブルボックスモデルを使用する Flex は水平方向のセンタリングを実装します
【注意】IE9 ブラウザは
をサポートしていません
【1】スケーラブルコンテナに主軸の配置を設定する jusify-content:center
<style>.parent{ display: flex; justify-content: center;}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div>
ログイン後にコピー
ログイン後にコピー
【2】スケーラブルプロジェクトについて マージン設定：0 auto
<style>.parent{display: flex;}.child{margin: 0 auto;}</style>ログイン後にコピー
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div>
ログイン後にコピー
ログイン後にコピー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
See all articles
