Web ページのセンタリング問題_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:56:25
オリジナル
1218 人が閲覧しました

親愛なる先輩方、
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 が位置決めを使用する場合は、親 div にposition:relevant; を追加してから、position:absolute; を使用して位置決めを行う必要があります。

など
inside 中央のボックスの上と左から 10 ピクセルの位置になります。



DIV に幅がない場合は、水平方向にのみ中央揃えにすることができます。位置:それを達成するのは絶対です。これを実現するもう 1 つの方法は、JS を使用することです。ブラウザの高さを取得し、DIV の高さを減算して 2 で割ります。

1. メイン div の幅を指定し、margin: 0 auto を使用します。

2. セカンダリ div のレイアウトには、position: ABS を使用しません。セカンダリ div

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート