Html 容器中的中心溢出浮动div

我目前有一个简单的设置：一个居中的容器div，其宽度为屏幕的90%，其中包含五个20%宽度的div。这是伟大的作品时，该司的所有适合排。它们都进行了调整，以便均匀分布并居中。但是，由于当用户将屏幕调整为较小宽度时，5个div必须具有最小宽度，因此它们填充了多行，不再居中。一旦发生这种情况，我希望它们保持其最小宽度，但居中，这样您就可以看到顶部一行div两侧的蓝色容器div，而不是将它们全部左对齐（对于下面的行也是如此）。我如何在HTML和CSS中实现这一点？谢谢

<style type="text/css">
.container {
  height: 220px;
  width: 90%;
  max-width: 1200px;

  margin-left: auto;   
  margin-right: auto;

  background-color: blue;
}

.box {
  position: relative;
  height: 100%;
  width: 20%;
  min-width: 200px;

  margin: 0 auto;
  float: left;

  background-color: red;
}
</style>


<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div> 

.集装箱{
高度：220px；
宽度：90%；
最大宽度：1200px；
左边距：自动；
右边距：自动；
背景颜色：蓝色；
}
.盒子{
位置：相对位置；
身高：100%；
宽度：20%；
最小宽度：200px；
保证金：0自动；
浮动：左；
背景色：红色；
}
1.
2.
3.
4.
5.

如果您使用

显示：内联块

与

文本对齐：居中

结合使用，而不是使用浮动，我认为您将获得所需的居中效果

示例如下：

（调整结果窗口的大小以查看效果）

---

注意：使用内联块时，请确保

s之间没有回车符。否则，如果使用

display:inline block

与

text align:center

结合使用，而不是使用浮点数，则它们之间会有一点不必要的空间

示例如下：

（调整结果窗口的大小以查看效果）

---

注意：使用内联块时，请确保

s之间没有回车符。否则，它们之间会有一点多余的空间

谢谢。这是我的主要方法，但是一旦我开始添加内容，框就不再垂直对齐。（e.i

div class=“box”>12

2345

）我能做些什么来避免这个问题？哦，对了，对不起……我编辑了我的答案来解决这个问题，以及IE漏洞。垂直对齐的额外CSS是

vertical align:top

，另外还有两行代码可以使div在IE8和IE8以下的版本中正常工作。希望这对你有用。谢谢。这是我的主要方法，但是一旦我开始添加内容，框就不再垂直对齐。（e.i

div class=“box”>12

2345

）我能做些什么来避免这个问题？哦，对了，对不起……我编辑了我的答案来解决这个问题，以及IE漏洞。垂直对齐的额外CSS是

vertical align:top

，另外还有两行代码可以使div在IE8和IE8以下的版本中正常工作。希望这对你有用。

.container 
{
    text-align:center;
}

.box 
{
    display:inline-block;
    /*For IE*/
    *display: inline;
    zoom:1;
    /*Aligns divs vertically along the top*/
    vertical-align:top;
}