Question

我看起来像一个简单的CSS问题，但作为一个样式新手，我一直很烦恼。任何帮助都非常感谢。我试图在Stack Overflow上找到另一个例子，但这并不令我感到惊讶，所以如果这是一个骗局，请指出我正确的方向。

我有一个容器元素，其中包含一些文本和一个固定尺寸的元素列表。

  <div class='container'>
    <p> Title </p>
    <div class='item'>1</div>
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
  </div>

我不知道我将拥有多少项目 - 它可能是3 - 9.我希望容器在页面上居中并且标题位于项目上方，但我想要项目从左到右添加。我希望项目左对齐，以便它们在行标记为满时显示在标题下方和页面上，但如果行未满，则应从左到右显示。因此，如果屏幕可以容纳三个并且有四个，则第四个应该与第一个元素对齐而不是在中间。

.container {
  margin: 0 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

p {
 margin: 0 auto;
 text-align: center;
 justify-content: center;
 align-self: center;
 display: block;
}

.item {
  flex: none;
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 20px;
}

我遇到的问题是我可以将文本居中，但由于父级的宽度不是基于孩子的宽度，因此它总是略微偏离中心。所以，我读到我可以通过在父级上设置display：inline-flex来强制父级的宽度基于子级的宽度。这实现了这一点，但不幸的是，然后迫使标题与物品一致，这违背了目的。我需要根据子的宽度计算父级宽度的唯一原因是文本将知道如何在父级内部居中。

任何帮助都会非常感激。我不需要使用flexbox - 任何其他有效的方法都会很棒......这只是我尝试过的一系列不同内容中的最新内容。

Answer 1

如果我正确理解了这个问题，那么你走在正确的轨道上，在display:block上设置p是一个好主意，但你还需要设置width:100%以便它赢了“与其他物品保持联系。

见下文或jsFiddle

.container {
  margin: 0 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

p {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-self: center;
  display: block;
}

.item {
  flex: none;
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 20px;
}

<div class='container'>
  <p> Title </p>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
</div>

覆盖未知数量的项目的水平中心标题

1 个答案: