html - 如何在居中的 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>

我调整窗口大小时的结果

我需要的

PS对不起我的英语，我希望你明白这一点。

Answer 1

这是演示

只是它很简单添加Float:left到它

Answer 2

我认为.container { text-align:left;}会为你解决问题，当然你需要.container > div { text-align:center;}. 而且我还建议向这些 div 添加类，这样您就不必使用直接子选择器。