Question

我正在尝试将一组按浮动内容排列的内容居中”。如果一般区域变小，应该跳到下一行进行分组，因此我也将它们分组为分隔块。

代码：

<dif id="mainframe">
  <dif id="centeringframe">
    <dif id="dividerblock">
      <dif id="contentblock">
        <p>content 1</p>
      </dif>
      <dif id="contentblock">
        <p>content 2</p>
      </dif>
    </dif>
    <dif id="dividerblock">
      <dif id="contentblock">
        <p>content 3</p>
      </dif>
      <dif id="contentblock">
        <p>content 4</p>
      </dif>
   </dif>
  </dif>
</dif>

StyleSheet：

#mainframe {
  display:flex;
  width:100%;
  justify-content:center;
}
#centeringframe {
  display:inline-block;
  background-color: red;
}
#dividerblock {
  display:inline-block;
  float:left;
  background-color: green;
}
#contentblock {
  float:left;
  width: 80px;
  height:80px;
  padding: 10px;
  text-align: center;
  background-color: blue;
}

JSfiddle：http://jsfiddle.net/3kwbq4on/

只要所有4个内容都适合一行，此方法就可以正常工作。当内容3＆4传递到第二行时，一般居中失败。

如何确保居中框的大小适应内容/分隔符的新排列？

Answer 1

将另一个div放在浮动内容上。使用（保证金：0自动；）使其居中

<div style="margin: 0 auto; width: 100px; border: 1px solid red;">
  <div style="float:left">
    <p>Some Text</p>
  </div>
</div>

HTML / CSS-浮动内容居中

1 个答案: