以内联块包装div为中心?

时间:2012-11-08 03:06:15

标签: css html

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

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

将以下css用于“.clearfix”

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

这是jsFiddle file