ホームページ >ウェブフロントエンド >htmlチュートリアル >div センタリング問題_html/css_WEB-ITnose

div センタリング問題_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:55:151222ブラウズ

bdab2693f8ce1a373681be43c42e2165
eadde6b2af7851b62138366b203fd2a1
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
コードレンダリングは次のとおりです:

達成したい効果は次のとおりです:


ディスカッションへの返信 (解決策)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title>    <style>        #div1 {            border:1px red solid;            width: 100%;            height: 570px;            min-width: 1200px;        }        #div2 {            border: 1px red solid;            position: absolute;            left: 50%;            top: 285px;            margin-left: -300px;            background: url('/home/tpl/pc/img/bg1.png') repeat;            width: 640px;            padding-top: 20px;            padding-bottom: 20px;            padding-left: 40px;            padding-right: 40px;            border-radius: 8px;        }    </style></head><body>    <div id="div1" >        <div id="div2" >        </div>    </div> </body></html>

div2 の幅と高さをハードにプログラムすることはできません。 div2 の幅と高さは内容に応じて動的に変化します。 div2 の最大幅は div1 の幅と同じです。

251d194f032862f662afa6e597758606
93f0f5c25f18dab9d176bd4f6de5d30e
6e281dc72bdf24de34b21af79b69ca9c > b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f

531ac245ce3e4fe3d50054a55f265927
6c04bd5ca3fcae76e30b72ad730ca86d ="div1" style="min-height:735px; margin:0 auto ;text-align:center;">
6739d505eadda4228e897dc0768d7600
8fe7329e56c9f58843a25b39d01bb9c1
2b5ac3f0642a57cd8b15f361a71401a4
64e81a6aca1f46f7235ea98ea951070c " src="" style="width:100%;height:200px; " alt="">
5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68
562eaf8ab77088285a1877b5ddebdcbe
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
これは私のコードです。 >



これが効果です、ありがとう

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。