如何在居中的div中对齐div

Question

我在主要居中的div中对齐div有问题。

这是我的代码

<style>
body {
  max-width: 1150px;
  min-width: 900px;
  margin:0 auto; }

.container {
  text-align:center;
  background-color:#e1e1e1; }

.box {
  width: 250px; }

.inline-block {
  color: #eee;
  margin: 10px 0px 0px 10px;
  text-align: center;
  display:inline-block; }

.one {
  height: 22px;
  background: #744; }

</style>

<div class="container">
    <div class="inline-block"><div class="one box">1</div>
    </div>
    <div class="inline-block"><div class="one box">2</div>
    </div>
    <div class="inline-block"><div class="one box">3</div>
    </div>
    <div class="inline-block"><div class="one box">4</div>
    </div>
    <div class="inline-block"><div class="one box">5</div>
    </div>
    <div class="inline-block"><div class="one box">6</div>
    </div>
    <div class="inline-block"><div class="one box">7</div>
    </div>
    <div class="inline-block"><div class="one box">8</div>
    </div>
</div>

调整窗口大小时的结果

我需要什么

P.S。对不起我的英语，我希望你能理解这一点。

Answer 1

以下是DEMO

只需简单地添加Float:left

即可

Answer 2

我认为.container { text-align:left;}会为您提供帮助，当然您需要.container > div { text-align:center;}。我还建议在这些div中添加类，这样就不必使用直接子选择器了。