我有这个HTML:
<div class="object-box">
<img ... />
<span class="caption">This is the caption</span>
</div>
.object-box .caption, .object-box img {
display: block;
}
.object-box {
border: 1px solid;
}
float: ...或display: inline-block来实现。但是，我也希望使用margin: auto将它放在页面的中心。这两种方法似乎不兼容。是否可以在不添加包装元素的情况下创建这样的收缩包装的居中容器？
编辑:
jsFiddle here
最佳答案
<!doctype html>
<html>
<head>
<title>ugh</title>
<style>
div#not-floated {
display:table;
margin:0 auto;
}
div#floated {
float:right;
position:relative;
right:50%;
}
div#floated-inner {
float:left;
position:relative;
left:50%;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#container { text-align: center; }
#container * { text-align: left; }
div#not-floated {
zoom: 1;
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="not-floated">
<img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"><br>
ok.
</div>
</div>
<div id="floated-container">
<div id="floated"><div id="floated-inner">
<img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg">
</div></div>
</div>
</body>
</html>
简单的解释是..
display:table;导致它在现代浏览器中收缩包装，这是在margin:0 auto;的现代浏览器中将无宽度块级居中的唯一方法。在IE中，可以使用父元素在您的收缩包装
display:inline块级元素上设置text-align:center。对于浮点数，使用IE容器的数学仅占50％。
关于html - 如何在CSS中居中放置一个宽度未知的框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3030121/