Question

我正在制作一个包含一系列图像的响应式页面。

我希望它们以水平居中的行显示。顶行中的图像完全相同，但流入第二行的图像不居中。它们与页面左侧对齐。

这是我的CSS：

.flex-container {
  padding: 0;
  margin: auto;
  list-style: none;
  display: flex;
 flex-flow: row wrap;
  justify-content: center;
}

.flex-item {
  padding: 15px;
  width: 120px;
  height: 130px;
  margin-top: 10px;
  line-height: 130px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  }

HTML：

<ul class="flex-container">
<li class=flex-item"><img src="img1" alt="1"></li>
<li class=flex-item"><img src="img2" alt="2"></li>
<li class=flex-item"><img src="img3" alt="3"></li>
<li class=flex-item"><img src="img4" alt="4"></li>
<li class=flex-item"><img src="img5" alt="5"></li>
<li class=flex-item"><img src="img6" alt="6"></li>
<li class=flex-item"><img src="img7" alt="7"></li>
<li class=flex-item"><img src="img8" alt="8"></li>
<li class=flex-item"><img src="img9" alt="9"></li>
</ul>

justify-content: center;仅适用于最上一行。

我做错了什么？

Answer 1

确定通过将CSS更改为;

来修复它

.flex-item {
  padding: 15px;
  width: 120px;
  height: 130px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  line-height: 130px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  }

flexbox项目不以第二行为中心

1 个答案: