示例：

Question

我目前有一个简单的设置：一个居中的容器div，它是屏幕宽度的90％，包含五个20％宽度的div。当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>

Answer 1

如果不是使用Floats，而是将display:inline-block与text-align:center结合使用，我认为您将获得所需的中心效果。

.container 
{
    text-align:center;
}

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

示例：

http://jsfiddle.net/DigitalBiscuits/pXGz3/3/

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

注意：使用内联块时，请确保<div>之间没有回车符。否则你会在他们之间得到一些不必要的空间

容器中的中心溢出的浮动Div

1 个答案:

示例：