我正在努力实现这样的目标:http://i.minus.com/ibxOaBw7BW8b5g.png
这是我到目前为止所做的:http://jsfiddle.net/QAPub/2/
如何将包装/容器居中?我真的不在乎容器是否存在,我的主要目标是三个黑色div的中心,但这是我已经得到的。
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
答案 0 :(得分:0)
有几种不同的方法可以实现这一目标。
这是我要使用的那个,将容器放入体内并给它边缘并将其放置在任何你想要的位置。
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
答案 1 :(得分:0)
将以下css用于“.clearfix”
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}