Css 将标题水平居中放置在包裹的未知数量的项目上

我有一个看似简单的CSS问题，但作为一个时尚新手，我一直很烦恼。非常感谢您的帮助。我试图找到另一个关于堆栈溢出的例子，但没有找到，这让我很惊讶，所以如果这是一个重复，请告诉我正确的方向

我有一个容器元素，其中包含一些文本和一个具有固定维度的元素列表

  <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>

我遇到的问题是，我可以将文本居中，但因为父对象的宽度不是基于子对象的宽度，所以它总是显得稍微偏离中心。因此，我读到我可以通过在父对象上设置display:inline flex来强制父对象的宽度基于子对象的宽度。这就实现了这一点，但不幸的是，这会迫使标题与项目保持一致，这违背了目的。我需要根据子对象的宽度计算父对象的宽度的唯一原因是，这样文本将知道如何在父对象内居中

---

任何帮助都将不胜感激。我不需要使用flexbox-任何其他有效的方法都会很好…这只是我尝试过的一系列不同方法中的最新方法。

如果我正确理解了这个问题，您的思路是正确的，在

p

上设置

display:block

是个好主意，但是您还需要设置宽度：100%，这样它就不会与其他项目保持内联

见下文或

.container{
保证金：0自动；
显示：内联flex；
弯曲方向：行；
柔性包装：包装；
调整内容：灵活启动；
}
p{
宽度：100%；
保证金：0自动；
文本对齐：居中；
证明内容：中心；
自对准：居中；
显示：块；
}
.项目{
flex：无；
宽度：200px；
高度：100px；
背景色：红色；
利润率：20px；
}

头衔

1.
2.
3.
4.

您甚至可以清理CSS:；）谢谢你的快速回复！这确实将打断到了自己的行中，但不幸的是，p仍然没有居中于项目上方，因为容器的宽度是其容器的宽度，而不是其子容器的宽度。我不知道为什么，因为在这个例子中，它是有效的：也许我的一些其他样式是阻止父级上的内联flex显示此属性？@LeighScherrer可能与内联flex行为和固定的子级宽度有关。为父对象添加边框或背景，以查看其位置。如果更符合要求，请在子对象上尝试最小宽度。“调整内容”也可以是基于重复项的选项，下面是一个小提琴演示，使用ghost元素匹配标记，以保持最后一行的元素左对齐：

.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;
}