如何在缩放浏览器窗口时将DIV居中

Question

jsfiddle：https://jsfiddle.net/hfnmspwa/3/

我有浮动DIV文本，调整大小时调整浏览器窗口大小。这是有效的，但是我无法将这些文本框放在页面中间。没有漂浮中心！请参阅jsfiddle以获取更多信息 - 我在JS象限中添加了一些注释。

＆＃13;

＆＃13;

.infos_div {
  background-color: #FFF;
}

.infos_div::after {
  content: "";
  clear: both;
  display: table;
}

.infos_container_div {
  background-color: #9FC;
  display: inline-block;
}

.info_div {
  display: inline-block;
  cursor: pointer;
  float: left;
  text-align: center;
  width: auto;
  height: auto;
  min-height: 80px;
  max-width: 30%;
  min-width: 200px;
  padding: 10px;
  margin: 10px;
  z-index: 1;
  background-color: #FFF;
  white-space: normal;
}

＆＃13;

<div class="infos_div">
  <div class="infos_container_div">
    <div class="info_div">
      <strong>Feature 1</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 2</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 3</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 4</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div" o>
      <strong>Feature 5</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>SFeature 6</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以给父元素中心文本对齐并删除浮动。

所以将text-align: center;添加到.infos_container_div并从float: left;删除.info_div。

https://jsfiddle.net/hfnmspwa/4/

Answer 2

如果你拿

float:left;

关闭.info-div他们应该居中。

Answer 3

如果您需要将3个段落置于居中位置，则可以使用网格。

* {
  margin: 0;
  padding: 0;
}

.infos_div {
  background-color: #FFF;
}

.infos_div::after {
  content: "";
  clear: both;
  display: table;
}

.infos_container_div {
  background-color: #9FC;
  display: grid;
  grid-template-areas: ". . .";
  text-align: center;
  grid-gap: 10px;
  padding: 10px;
}

.info_div {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  width: auto;
  height: auto;
  padding: 10px;
  z-index: 1;
  background-color: #FFF;
  white-space: normal;
}

<div class="infos_div">
  <div class="infos_container_div">
    <div class="info_div">
      <strong>Feature 1</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 2</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 3</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 4</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div" o>
      <strong>Feature 5</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>SFeature 6</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
  </div>
</div>