Yet Another Center DIVs inside other DIV question
Consider the following HTML and CSS. The desired result is the two pink boxes are centered within the single green box. The text is NOT centered. There is padding on the left and right of each box. I should be able to have 1 or more of these b开发者_如何学运维oxes, up to as many as 8; they should all float to fill in the container div. I've been bangin my head on this one for weeks now, and nothing I read or try seems to work - margin: auto, display:inline, etc etc. I added the box-margin div to create the padding when trying to use margin:auto, but it still didn't get the result I was looking for. Halp?
HTML
<body>
<div id="page">
<div id="main">
<div class="box-group">
<div class="box-margin">
<div class="box">
<h2>Data</h2>
<ul>
<li><a href="/URL">Link</a></li>
</ul>
</div>
</div>
<div class="box-margin">
<div class="box">
<h2>Reports</h2>
<ul>
<li><a href="/URL/">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
body
{
margin: 0;
padding: 0;
}
#page
{
width: 95%;
min-width:800px;
border: thin solid red;
}
#main
{
padding: 30px 30px 15px 30px;
margin-bottom: 30px;
min-width: 875px;
border: thin solid black;
}
.box-group
{
width: 100%;
padding: 10px;
border: thin solid green;
}
.box-margin
{
margin: auto;
width: 275px;
float: left;
padding: 15px;
}
.box
{
border: thin ridge pink;
height: 200px;
width: 250px;
}
Have a look at this page on centered floats. It has a neat trick that might not work for you (it will center them as a group, but not per-line, if they wrap), but it also details a fix for display: inline-block in IE.
Floats will always stick to the left or right edge of their container. You should use display: inline-block for this.
加载中,请稍侯......
精彩评论