Web ページのセンタリング問題_html/css_WEB-ITnose
親愛なる先輩方、
Web ページのメイン div を中央に配置したいのですが、オンラインで確認したところ、margin: 0 auto; を使用してメイン div を中央に配置し、その中に他の div を追加できるとのことですが、追加された div が絶対配置されている場合、Web ページを正常に表示できません。Web ページ内のすべての div に絶対配置を使用する予定があるかどうか (これは単純で粗雑な方法です)、Web ページをブラウザーの中央に配置するにはどうすればよいですか。 。
構造は大まかに以下の通りです。
<メイン div、ブラウザの中央に配置>//この div を中央に配置し、次のセカンダリ div をこの div 内に絶対配置する方法。
ありがとうございます。
ところで、ウェブページを中央に配置するために通常どのような方法が使用されているかをお聞きしたいのですが。
親子関係のある div 内で混合配置メソッドを使用することは許可されていませんか?
ディスカッションに返信 (解決策)
現在のページは div の中央に配置されています。f12 を使用して CSS を確認できます
メイン div に幅を与えた後、margin:0 auto を使用して、div を中央に配置します。ページのメイン div。セカンダリ div をメイン div のposition:absolute に対して絶対的に相対的に配置する必要がある場合、メイン div はposition:relative を基準にして配置する必要があります。
メイン div に width:**px; の幅を与え、メイン div が中央に配置されるように属性 margin:0 auto; を追加します。
DIV に幅がない場合は、水平方向にのみ中央揃えにすることができます。位置:それを達成するのは絶対です。これを実現するもう 1 つの方法は、JS を使用することです。ブラウザの高さを取得し、DIV の高さを減算して 2 で割ります。
1. メイン div の幅を指定し、margin: 0 auto を使用します。 2. セカンダリ div のレイアウトには、position: ABS を使用しません。セカンダリ div

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします
