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

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

高洛峰

リリース： 2017-03-08 14:12:28

オリジナル

1048 人が閲覧しました

水平方向の中央揃えは、一般的に使用されるレイアウト方法の 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の水平方向のセンタリングに関する分析