我有这个HTML:
<div class="object-box">
<img ... />
<span class="caption">This is the caption</span>
</div>
这附带了这个CSS:
.object-box .caption, .object-box img {
display: block;
}
.object-box {
border: 1px solid;
}
我希望周围的div收缩包装到它的内容.我可以通过使用float: ...或实现这一点display: inline-block.但是,我也希望它以页面为中心,使用margin: auto.这两种方法似乎不兼容.
是否可以在不添加包装元素的情况下创建这种收缩包装的中心容器？
jsFiddle 在这里
med*_*iev 20
<!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中,使用父元素在shrinkwrapped display:inline块级元素上设置text-align:center是一个问题.
对于浮动,它只使用容器进行IE的50%数学运算.
Sum*_*mer 17
几个月后才开始吵闹.将未知宽度的div居中是一个常见问题,因此您可能希望创建一个可重复使用的解决方案.
包含您想要居中的未知宽度的div的HTML:
<div class="centered-block-outer">
<div class="centered-block-middle">
<div class="centered-block-inner">
<!-- div that you'd like to center goes here -->
</div>
</div>
</div>
CSS:
/* To center a block-level element of unknown width */
.centered-block-outer {
overflow: hidden;
position: relative;/* ie7 needs position:relative here*/
}
.centered-block-middle {
float: left;
position:relative;
left:50%;
}
.centered-block-inner {
position:relative;
left:-50%;
}
其原因在此解释:http://www.tightcss.com/centering/center_variable_width.htm
令人讨厌的部分是你必须创建三个div才能使它工作 - css真的应该提供更好的方法.但最重要的是,此解决方案适用于跨浏览器和整个站点.
祝好运!