Question

HTML

  <div class="wrapper">
    <div class ="content">
      <div id="container">
      </div>
    </div>
  </div>

CSS

.wrapper {
  width: 1000px;
}

.content {
  width: 100%;
  text-align: center;
}

#container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

输出：https://gyazo.com/c36c7049e68c46ea617391b5dd93b81f

我正在从XML文件导入数据，并试图将数据放在content div中居中，但是图像一直遍历页面，我不知道为什么。如有任何帮助或研究链接，将不胜感激。

Answer 1

您只需要将justify-content设置为center的值即可。

如果您对使用flexbox不太满意，我真的推荐这个交互式游戏来学习如何掌握flex：flexbox froggy

.wrapper {
  width: 1000px;
}

.content {
  width: 100%;
  text-align: center;
}

#container {
  display: flex;
  justify-content: center;
}

span {
  height: 50px;
  width: 30px;
  background-color: salmon;
  margin: 0 20px;
}

<div class="wrapper">
  <div class="content">
    <div id="container">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

XML数据不会在页面上居中

1 个答案: