Question

我有一些左浮动的div。当窗口调整大小时，他们需要自由地包裹它们。我需要水平居中。

.el { background: green; width: 200px; height: 40px; 
      border: 1px solid; float: left; margin: 5px; text-align: center;}
.el:nth-child(odd) { background: red; }
.el:nth-child(even) { background: yellow; }

<div id="container">
  <div class="el">1</div>
  <div class="el">2</div>
  <div class="el">3</div>
  <div class="el">4</div>
  <div class="el">5</div>
  <div class="el">6</div>
  <div class="el">7</div>
  <div class="el">8</div>
  <div class="el">9</div>
</div>

Codepen： http://codepen.io/serhio/pen/PGZQwp

Answer 1

对不同的屏幕分辨率使用CSS Media查询，以便在浏览器调整大小时包装div。使用以下CSS将div水平居中。例如：

<article>
<div id="bodycontent">
...
</div>
</article>

其中outer_container是包含所有子div的out div的css类名。

Answer 2

知道了。主要想法：

#container { text-align: center; }
.el { display: inline-block; }    

#container > * { text-align: initial; } /* resetting child align */

Fixed CodePen sample

Answer 3

请查看您是否正在尝试实现此结果。

＆＃13;

.el { background: green; width: 200px; height: 40px; 
      border: 1px solid; display:inline-block; margin: 5px; text-align: center;}
.el:nth-child(odd) { background: red; }
.el:nth-child(even) { background: yellow; }
#container{margin:0px auto; width:100%; text-align:center}
body{width:100%;}

＆＃13;

<div id="container">
  <div class="el">1</div>
  <div class="el">2</div>
  <div class="el">3</div>
  <div class="el">4</div>
  <div class="el">5</div>
  <div class="el">6</div>
  <div class="el">7</div>
  <div class="el">8</div>
  <div class="el">9</div>
</div>

＆＃13;

将左浮动div放在中心

3 个答案: