2

これまでのところ、同じサイズのボックスの流体グリッドがあります。画面幅が 800 ピクセル以上の場合、ここに示すように、画面の中央に 4 つの青いボックスが 2 行あります。コードは次のとおりです。

<style type="text/css">
body {width:100%; min-height:100%;}

#content {width:100%; max-width:800px; margin:0 auto;}

.box { float: left; display: table; height: 180px; 
      width: 180px; margin:10px; background-color:blue;}
</style>

<body>
   <div id="content">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
</body>

画面の幅が縮小されると、ボックスは同じサイズのままで、1 行あたりのボックスの数が減り、より多くの行にドロップダウンします。そのすべてがまさに私が欲しいものです。唯一の問題は、画面幅が縮小されると、ボックスが左揃えになることです。

残りの行を中央に配置したいと思います。誰でも助けることができますか？

4

1 に答える 1