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

Question

我有一个 CSS 元素，它周围有一个边框，里面可能有一个或多个盒子，所以整个 div 的宽度会根据其中有多少个盒子而变化。但是，我希望整个 div 在屏幕上居中。

通常，为了居中，我只使用:

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

但是，这一次，我必须 float 元素或使其成为内联 block ，这样 div 的大小将根据内容调整大小，如果我这样做，margin-left 和 margin-right 自动执行不起作用，它总是停留在屏幕的左侧。

目前我有:

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

我还尝试使用 float: left 而不是 display: inline-block。

有谁知道既可以使 div 居中又可以根据内容同时调整大小的好方法？任何帮助将不胜感激。

Answer 1

您是否尝试过将其保留在行内 block 中，并将其放入设置为 text-align: center 的 block 级元素中？

例如

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/