Question

考虑以下设置：

CSS：

#container {
   position: relative;
   width: 95%;
   margin: 0 auto;
   height: 100%;
}

.parent {
   position: relative;
   width: 100%;
   height: auto;
   float: left;
   clear: left;
}    

.child {
   float: left;
   width: 50%;
   max-width: 200px;
}

HTML：

<body>
   <div id="container">
      <div class="parent">
         <div class="child"></div>
         <div class="child"></div>
      </div>
      <div class="parent">
         <div class="child"></div>
         <div class="child"></div>
      </div>
   </div>
<body>

如果窗口的宽度大于400px，.child元素将不会居中，而是会粘在左侧。

我无法事先知道.child元素的数量（但每个父元素内的数字在所有.parent元素中始终相同）。如果还有更多，我使用JS来计算并为其宽度分配新的百分比，这样他们仍然保持响应（所以如果我有2个子元素，他们的宽度将是50％，如果我有四个他们的宽度将是25％等...）

有没有办法让.child元素与上述设置保持一致？

提前感谢您的帮助。： - ）

Answer 1

将text-align: center添加到.parent，移除float并将display属性更改为该孩子的inline-block。

.parent {
   position: relative;
   width: 100%;
   height: auto;
   float: left;
   clear: left;
   text-align: center;
}    

.child {
   display: inline-block;
   width: 50%;
   max-width: 200px;
}

如果项目之间的空格有问题，请在子divs上分割结束标记：

<div class="child"></div
><div class="child"></div>

le CodePen：http://codepen.io/erquhart/pen/ukHco

如何将具有最大宽度的流体div居中？

1 个答案: