CSSの水平方向のセンタリングに関する分析-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの水平方向のセンタリングに関する分析

高洛峰

Mar 08, 2017 pm 02:12 PM

水平方向の中央揃えは、一般的に使用されるレイアウト方法の 1 つです。主にインライン要素のセンタリングとブロック要素のセンタリングに分かれます。ブロック要素のセンタリングも、固定幅センタリングと可変幅センタリングに分けられます。インライン要素の中央揃えは、text-align:center を使用することで実現できます。幅が既知のブロック要素の中央揃えは、絶対配置を使用し、

margin を幅の半分の負の値に設定することで実現できます。ただし、ページネーションのページ番号表示などで可変幅センタリングを使用する必要がある場合は、上記の 2 つよりも一般的に使用され、より複雑になります。いくつかの一般的なレベルを検討してみましょう。使用されたブロック要素が中央に配置されます。

1. ラベルのネストオフセット

実装原則:

固定幅センタリングの実装を思い出させます: 最初に画面の中央にオフセットし、次にそのマージン方向を幅の半分のオフセットに設定します。このアイデアを使用して、最初に画面の右半分に 50% をオフセットし、次に反対方向にオフセットして戻す方法を考えられますか?実装するのがさらに難しいのは、幅が何なのかがわからないことです。また、親の幅と子の幅が等しい限り、パーセンテージを使用すると問題を解決できると思いました。では、親の幅をワードの幅と同じにするにはどうすればよいでしょうか? float のラッピング特性を利用して、親要素がフローティングで幅と高さが設定されていない場合、子要素を可能な限りラップしようとします。

実装コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽度水平居中</title>
    <style>
        body{  
            background-color: #e5da31;  
        }  
        .container{  
            position: absolute;   /*脱离文档流，其宽度将由子元素的宽度决定*/  
            left:50%;  
        }  
        .content{  
            position: absolute;  
            left:-50%;  
            background-color: #2ecc71;  
        }  
    </style>
</head>
<body>
<p class="container">
    <p class="content">标签嵌套</p>
</p>
</body>
</html>

実装効果：

CSSの水平方向のセンタリングに関する分析

メリットとデメリット：

デメリットは明らかで、文書の内容と関係のないタグを記述する必要があるため、互換性のためにさらに数行のコードを入力する必要がありますパフォーマンスは良好で、IE6 以降のブラウザで表示する場合には問題ありません

2.flex-box レイアウト

実装原則:

最初にフレックスコンテナを定義し、次にそのコンテンツの配置を設定しますメソッドは中間の配置です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽度水平居中</title>
    <style>
        body {  
            background-color: #e5da31;  
        }  
        .container {  
            display: flex;  /*定义一个flex容器*/  
            justify-content: center;  /*定义容器的空间没有被全部占用时，内容的对其方式*/  
        }  
        .content{  
            background-color: #2ecc71;  
        }  
    </style>
</head>
<body>
<p class="container">
    <p class="content">标签嵌套</p>
</p>
</body>
</html>

達成効果:

CSSの水平方向のセンタリングに関する分析

メリットとデメリットの分析:

それは実装が最も簡単ですが、flex の互換性が低いため、互換性が必要な場合は、高度なブラウザを使用する場合は注意してください。

3. インラインレイアウト

実装原則:

text-align:center は、ブロック要素をインライン要素に変更する場合、text-align を使用します。水平方向のセンタリングが可能です。

実装コード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽度水平居中</title>
    <style>
        body{  
            background-color: #e5da31;  
        }  
        .container{  
          text-align:center;  
        }  
        .content{  
        display: inline;  
            background-color: #2ecc71;  
        }  
    </style>
</head>
<body>
<p class="container">
    <p class="content">标签嵌套</p>
</p>
</body>
</html>

実装効果:

CSSの水平方向のセンタリングに関する分析

長所と短所の分析:

本来はテキストの配置を変更するために使用される text-align を使用して、水平方向の中央揃えを実現すると、常にちょっとぎこちない、この部分最初に外側のコンテナも冗長ですが、本体内の他の要素に影響を与えないように、当面はこのままです。また、互換性も良くIE6+では正常に表示可能です。

上記は編集者によるCSSの水平方向のセンタリングに関する小さなディスカッションの全内容です。PHP中国語ウェブサイトを応援していただければ幸いです~

。

以上がCSSの水平方向のセンタリングに関する分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか？Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合：

ブラウザエンジンの多様性Apr 16, 2025 pm 12:02 PM

彼らが2013年にChromeに行ったとき、私たちはオペラを失いました。今年初めにChromeになったとき、Edgeと同じ取引。マイク・テイラーはこれらの変更を「減少させて」と呼びました

Web共有に関するUXの考慮事項Apr 16, 2025 am 11:59 AM

Trashy ClickBaitサイトから出版物の最大の8月まで、共有ボタンは長い間ウェブ全体でユビキタスでした。それでも、これらは議論の余地があります

毎週のプラットフォームニュース：AppleはWebコンポーネント、プログレッシブHTMLレンダリング、自己ホストの重要なリソースを展開していますApr 16, 2025 am 11:55 AM

今週のラウンドアップでは、AppleはWebコンポーネント、InstagramがどのようにInsta-Loadingスクリプトであるか、自己ホストの重要なリソースのための考えのための食べ物に入ります。

git pathspecsとそれらの使用方法Apr 16, 2025 am 11:53 AM

gitコマンドのドキュメントを調べていたとき、それらの多くが選択肢があることに気付きました。私は当初、これはただのものだと思っていました

製品画像のカラーピッカーApr 16, 2025 am 11:49 AM

難しい問題のように聞こえます。私たちはしばしば、何千もの色で製品ショットを持っていないので、withをひっくり返すことができます。私たちもそうしません

ReactとThemeproviderを使用した暗いモードの切り替えApr 16, 2025 am 11:46 AM

ウェブサイトにダークモードオプションがあるときが好きです。ダークモードにより、ウェブページが読みやすくなり、目がリラックスしているように感じます。を含む多くのウェブサイト

HTMLダイアログ要素を使用したいくつかの実践Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。