Question

我正在努力实现这样的目标：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;
     }

Answer 1

有几种不同的方法可以实现这一目标。

这是我要使用的那个，将容器放入体内并给它边缘并将其放置在任何你想要的位置。

http://jsfiddle.net/QAPub/3/

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;
}

Answer 2

将以下css用于“.clearfix”

.clearfix {
    background-color: orange;
    display:table;
    margin:0 auto;
}

这是jsFiddle file。

以内联块包装div为中心？

2 个答案: