时间戳

首页 > 解决方案 > HTML/CSS - 居中浮动内容

css - HTML/CSS - 居中浮动内容

问题描述

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

代码：

<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>

样式表：

#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 传递到第二行时，一般居中失败。

如何确保 centeringframe 调整其大小以适应新的内容/分隔符排列？

标签： csscss-float

解决方案

在您的浮动内容上放置另一个 div。使用 (margin: 0 auto;) 使其居中

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

推荐阅读