ホームページ >ウェブフロントエンド >htmlチュートリアル >div センタリング問題_html/css_WEB-ITnose
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
これは私のコードです。 >
これが効果です、ありがとう