ホームページ > 記事 > ウェブフロントエンド > CSSの水平方向のセンタリングに関する分析
CSSの水平方向のセンタリングに関する分析
- 高洛峰オリジナル
- 2017-03-08 14:12:281079ブラウズ
水平方向の中央揃えは、一般的に使用されるレイアウト方法の 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>
実装効果：
メリットとデメリット：
デメリットは明らかで、文書の内容と関係のないタグを記述する必要があるため、互換性のためにさらに数行のコードを入力する必要があります パフォーマンスは良好で、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>
達成効果:
メリットとデメリットの分析:
それは実装が最も簡単ですが、flex の互換性が低いため、互換性が必要な場合は、高度なブラウザを使用する場合は注意してください。
3. インラインレイアウト
<!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>
実装効果:
長所と短所の分析:
本来はテキストの配置を変更するために使用される text-align を使用して、水平方向の中央揃えを実現すると、常にちょっとぎこちない、この部分 最初に外側のコンテナも冗長ですが、本体内の他の要素に影響を与えないように、当面はこのままです。また、互換性も良くIE6+では正常に表示可能です。 上記は編集者によるCSSの水平方向のセンタリングに関する小さなディスカッションの全内容です。PHP中国語ウェブサイトを応援していただければ幸いです~
。
以上がCSSの水平方向のセンタリングに関する分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。