0

我目前有一个简单的设置：一个居中的容器 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>
4

1 回答 1

3

如果不使用浮点数，而是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/

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

注意：使用 inline-block 时，请确保 s 之间没有回车<div>。否则你会在它们之间得到一点不需要的空间

于 2012-04-08T22:51:14.863 回答