让 CSS 元素自动调整大小到内容宽度，同时居中

Question

我有一个 CSS 元素，周围有边框，其中可能有一个或多个框，因此整个 div 的宽度会根据其内部存在多少个框而变化。但是，我希望整个 div 位于屏幕中央。

通常，为了使内容居中，我只使用：

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

但是，这一次，我必须浮动元素或使其成为内联块，这样 div 的大小将根据内容调整大小，如果我这样做，边距- 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/

Answer 2

不幸的是，我认为这不能仅通过 CSS 来实现。一旦知道其宽度（即在附加框之后），您始终可以使用 JavaScript 将 div 居中，例如：

$(document).ready(function() {
    var itemWidth = $('#boxContainer').width();
    var availWidth = $(screen).width();
    var difference = availWidth - itemWidth;
    $('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});