简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS で margin:0 auto を設定すると水平方向の中央揃えが無効になる理由の分析

伊谢尔伦
リリース： 2016-11-23 14:36:32
オリジナル
2127 人が閲覧しました

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。プレゼンテーション層のロゴや属性 (

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ログイン後にコピー

* フレームセット: ページにフレームが含まれている場合は、この DTD を使用する必要があります:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
ログイン後にコピー

4)。どちらを選択するかについては、移行版を使用してください。

長い間話した後、margin:0 atuo; が機能しません。中央に配置できない場合は、文書の先頭に DOCTYPE ステートメントがあるかどうかを確認してください。そうでない場合は、それをコピーして貼り付けるだけで済みます。大丈夫。

また、 margin:0 auto; と margin-left:auto; margin-right:auto; の実際の効果が異なる場合があります。これは、margin-top の高さが 0 に設定されていないことが原因である可能性があります。予期せぬエラーが発生します。


関連ラベル：
css margin
ソース：php.cn
前の記事：CSSを最適化する 次の記事：CSS強制改行以降の非表示の実装
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！