div 居中问题

挥手功名 2016-03-07 11:22:56

<div id="div1" style="min-height:735px; margin:0 auto;text-align:center;">
<div id="div2" style="margin:0 auto;width:auto;height:auto;display:inline-block !important; display:inline;text-align:center;">
</div>
</div>
该代码效果图如下：

我希望达到的效果如下：

...全文

93 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

挥手功名 2016-03-07

打赏
举报

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> </style> </head> <body> <div id="div1" style="min-height:735px; margin:0 auto;text-align:center;"> <div id="div2" style="margin:0 auto;width:auto;height:auto;display:inline-block !important; display:inline;text-align:center;"> <c:forEach var="qq" items="${qqlist }"> <div id="div3" style="width:200px;float:left;"> <a href="" class="thumbnail"> <img name="deviceImg" src="" style="width:100%;height:200px;" alt=""> </a> </div> </forEach> </div> </div> </body> </html> 我没说清楚，这是我的代码，各位给帮帮忙

挥手功名 2016-03-07

打赏
举报

div2的宽和高都不能写死啊，div2的宽和高是根据它的内容动态变化的，div2的最大宽度等于div1的宽度，你都写死了，不行

___紫菜 2016-03-07

打赏
举报

<!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>

挥手功名 2016-03-07

打赏
举报

就是这效果，谢了

天际的海浪 2016-03-07

打赏
举报


<!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>