ホームページ > 記事 > ウェブフロントエンド > CSS で margin:0 auto を設定すると水平方向の中央揃えが無効になる理由の分析
CSS で margin:0 auto を設定すると水平方向の中央揃えが無効になる理由の分析
- 伊谢尔伦オリジナル
- 2016-11-23 14:36:322094ブラウズ
Web ページの作成に慣れていない多くの友人が遭遇する可能性のある一般的な問題は、CSS に margin:0 auto; を追加しても効果がなく、中央に配置できないことです。左側と右側は幅に応じて適応されます。これは、実際には水平方向の中央揃えを意味します。中央揃えできない問題を引き起こす 2 つの典型的なエラーがあります:
1. 幅が設定されていません
<div style="margin:0 auto;"></div>
上記のコードを見てください。 DIV がまったく設定されていない幅、幅に応じて調整するにはどうすればよいですか?初心者が見落としやすい問題。
2. DOCTYPE が宣言されていません
1) DOCTYPE は、Web デザインで使用している XHTML または HTML のバージョンを示すために使用されるドキュメント タイプの略語です。標準に準拠した Web ページを構築するには、DOCTYPE 宣言が不可欠かつ重要なコンポーネントです。
2) 以下のコードを見てください。見覚えがあるでしょうか?このように、ドキュメントの先頭では、DOCTYPE を宣言するために、何よりも混乱したコードが使用されています:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3) DOCTYPE を宣言するには 3 つのオプションがあります
* 移行: 要件は非常に緩和された DTD であり、次のことが可能です。引き続き HTML4.01 ロゴを使用します (ただし、xhtml の記述に準拠する必要があります)。完全なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* Strict (厳格): 厳密な DTD。プレゼンテーション層のロゴや属性 ( * フレームセット: ページにフレームが含まれている場合は、この DTD を使用する必要があります: 4)。どちらを選択するかについては、移行版を使用してください。 長い間話した後、margin:0 atuo; が機能しません。中央に配置できない場合は、文書の先頭に DOCTYPE ステートメントがあるかどうかを確認してください。そうでない場合は、それをコピーして貼り付けるだけで済みます。大丈夫。 また、 margin:0 auto; と margin-left:auto; margin-right:auto; の実際の効果が異なる場合があります。これは、margin-top の高さが 0 に設定されていないことが原因である可能性があります。予期せぬエラーが発生します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">