获取CSS元素以自动调整内容宽度,同时居中

Question

我有一个CSS元素,它周围有一个边框,里面可能有一个或多个框,所以整个div的宽度会根据它内部有多少个框而改变.但是,我希望整个div都集中在屏幕上.

通常,为了集中注意力,我只使用:

margin-left: auto;
margin-right: auto;

但是,这一次,我必须浮动元素或使其成为内联块,因此div的大小将调整为内容大小,如果我这样做,则margin-left和margin-right auto不起作用,它始终只停留在屏幕的左侧.

目前我有:

#boxContainer {
    display:inline-block;
    clear:both;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
}

我也试过float: left而不是display: inline-block.

有没有人知道一个好的方法,既可以将div集中在一起又可以同时调整内容大小？任何帮助将不胜感激.

Answer 1

您是否尝试将其保持在内联块中,并将其置于设置为的块级元素中text-align: center？

例如

HTML

<div id="boxContainerContainer">
    <div id="boxContainer">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
</div>

CSS

#boxContainerContainer {
    background: #fdd;
    text-align: center;
}

#boxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
}

#box1,
#box2,
#box3 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
}

似乎按照你的描述工作:http://jsfiddle.net/pauldwaite/pYaKB/