让 CSS 元素自动调整到内容宽度，同时居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5343778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting a CSS element to automatically resize to content width, and at the same time be centered
提问by Anthony
I have a CSS element, with a border around it, that could have one or multiple boxes in it, so the width of the entire div changes depending on how many boxes are present inside of it. However, I want this whole div to be centered on the screen.
我有一个 CSS 元素，它周围有一个边框，其中可能有一个或多个框，因此整个 div 的宽度会根据其中的框数而变化。但是，我希望整个 div 都以屏幕为中心。
Usually, to center things, I just use:
通常，为了使事物居中，我只使用：
margin-left: auto;
margin-right: auto;
But, this time, I have to either float the element or make it inline-block so the size of the div will be resized to the content, and if I do that, the margin-left and margin-right auto does not work, it always just stays on the left side of the screen.
但是，这一次，我必须浮动元素或使其内联块，以便 div 的大小将调整为内容，如果我这样做，margin-left 和 margin-right 自动不起作用，它总是停留在屏幕的左侧。
Currently I have:
目前我有：
#boxContainer {
display:inline-block;
clear:both;
border:thick dotted #060;
margin: 0px auto 10px auto;
}
I also tried with float: leftinstead of display: inline-block.
我也试过用float: left代替display: inline-block。
Does anyone know of a good way to both center a div and allow it to be resized to content simultaneously? Any help would be greatly appreciated.
有谁知道将 div 居中并允许它同时调整大小以适应内容的好方法吗？任何帮助将不胜感激。
回答by Paul D. Waite
Have you tried keeping it inline-block, and putting it inside a block-level element that's set to text-align: center?
您是否尝试将其保持为内联块，并将其放入设置为 的块级元素中text-align: center？
E.g.
例如
HTML
HTML
<div id="boxContainerContainer">
<div id="boxContainer">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</div>
CSS
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;
}
Seems to work as you describe: http://jsfiddle.net/pauldwaite/pYaKB/
似乎按照您的描述工作：http: //jsfiddle.net/pauldwaite/pYaKB/
回答by BenM
Unfortunately, this cannot be achieved through CSS solely I don't think. You could always use JavaScript to center the divonce you know its width (i.e. after the boxes have been appended) for example:
不幸的是，我认为这不能仅通过 CSS 来实现。div一旦你知道它的宽度（即在附加框之后），你总是可以使用 JavaScript 来居中，例如：
$(document).ready(function() {
var itemWidth = $('#boxContainer').width();
var availWidth = $(screen).width();
var difference = availWidth - itemWidth;
$('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});
