我有一个CSS元素,它周围有一个边框,它可以有一个或多个框,所以整个div的宽度根据它内部存在多少个框而改变.但是,我希望这个整个div以屏幕为中心.
通常,为了中心事物,我只是使用:
margin-left: auto; margin-right: auto;
但是,这一次,我必须浮动元素或使其成为内嵌块,所以div的大小将被调整到内容,如果我这样做,margin-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,并允许它同时调整大小内容?任何帮助将不胜感激.
解决方法
你是否试图保持内联阻止,并将其放在设置为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/