今天做了一个项目中,要求页面的小模块居中显示,并且最多一行显示3列。这里我研究出了一种做法,不管小模块的数目为1或者2或者3.都可以居中显示。
html部分
<div class='content'>
<div class='content-inner'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
css部分
.content{width:1200px;margin:0 auto;text-align:center;overflow:hidden;}
.content-inner{margin-right:-146px;display:inline-block;zoom:1;*display:inline;}
.content .item{width:300px;height:400px;margin:0 146px 45px 0;float:left;background:#fff;border:1px solid #E0E6ED;box-shadow:0 0 60px rgba(13,37,62,.1);}