Heim >Web-Frontend >HTML-Tutorial >div 居中问题_html/css_WEB-ITnose
div 居中问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:55:151217Durchsuche
该代码效果图如下：
我希望达到的效果如下：
回复讨论(解决方案)
<!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的宽度，你都写死了，不行
nbsp;html>
我没说清楚，这是我的代码，各位给帮帮忙
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title> 页面名称 </title><style type="text/css">#div0 { display:table; width: 100%; min-height:735px;}#div1 { display:table-cell; vertical-align:middle; text-align:center; background-color: #999999;}#div2 { display:inline-block; text-align:center; background-color: #FFCCFF;}</style></head><body><div id="div0"><div id="div1"> <div id="div2"> <p>ggggggggggggggggggggggggggggggggggg</p> <p>ggggggggggggggggggggggggggggggggggg</p> <p>ggggggggggggggggggggggggggggggggggg</p> <p>ggggggggggggggggggggggggggggggggggg</p> </div></div></div></body></html> 就是这效果，谢了
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：DIV+CSS网页错位原因解决方法_html/css_WEB-ITnoseNächster Artikel：腾讯微云黑色遮罩引导蒙版更好的CSS实现方式_html/css_WEB-ITnose