Question

我不太确定如何解释这个问题，因为我对编码还比较新。

我目前有一系列7平方div，可以直接排列＆＃39;在桌面上。然而，随着屏幕的变化，我希望这些div通过浮动来降低，但是行本身仍保持居中。

EG。

会发生什么（如果＆amp; =屏幕边缘，＃=空格）=

桌面视图
＆amp;＃1/2/3/4/5/6/7 /＃＆amp;

收缩视图
＆amp;＃1/2/3/4 #####＆amp;
＆amp;＃5/6/7 #######＆amp;

我想要发生什么：

收缩视图
＆安培; ### 1/2/3/4 ##＆安培;
＆安培; #### 5/6/7 ####＆安培;

https://jsfiddle.net/48942Lor/ - 完整代码。

CSS

#grid-container {width:40%;text-align:center;margin:0 auto;}

.grid-image {
    display: inline-block;
    box-sizing: border-box;
    min-height: 200px;
    min-width: 200px;
    max-width: 200px;
    width: 200px;
    float: left;
    margin: 0 auto;
}

HTML

<section id="grid-container">
<div class="grid-image" id="red"></div>
<div class="grid-image" id="orange"></div>
<div class="grid-image" id="yellow"></div>
<div class="grid-image" id="green"></div>
<div class="grid-image" id="blue"></div>
<div class="grid-image" id="indigo"></div>
<div class="grid-image" id="violet"></div>
</section>

Answer 1

由于float:left而发生这种情况。删除它很好地工作。这是fiddle。

Answer 2

删除.grid-image下float:left;下的CSS，它会将所有内容对齐为居中。更新了小提琴https://jsfiddle.net/48942Lor/3/

Answer 3

Flexbox可以做到这一点。

/*Color Settings - DO NOT TOUCH OR ADD CODE */

#red {
  background-color: red
}
#orange {
  background-color: orange
}
#yellow {
  background-color: yellow
}
#green {
  background-color: green
}
#blue {
  background-color: blue
}
#indigo {
  background-color: indigo
}
#violet {
  background-color: violet
}
/*End of Color Settings - DO NOT TOUCH OR ADD CODE */

/*Outer Container Settings */

#grid-container {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/*End of Outer Container Settings */

.grid-image {
  box-sizing: border-box;
  min-height: 200px;
  min-width: 200px;
  max-width: 200px;
}

<section id="grid-container">
  <div class="grid-image" id="red"></div>
  <div class="grid-image" id="orange"></div>
  <div class="grid-image" id="yellow"></div>
  <div class="grid-image" id="green"></div>
  <div class="grid-image" id="blue"></div>
  <div class="grid-image" id="indigo"></div>
  <div class="grid-image" id="violet"></div>
</section>

docs

Answer 4

轻松，删除

float:left;

<。>来自.grid-image

响应地居中一个正方形网格

4 个答案: