无法使用换行的文本居中元素，因为文本换行将父级设置为 100% 宽度 [重复]答案

【问题标题】：Can't center element with wrapped text because text wrapping sets parent to 100% width [duplicate]无法使用换行的文本居中元素，因为文本换行将父级设置为 100% 宽度 [重复]
【发布时间】：2021-07-29 13:57:27
【问题描述】：

我遇到了环绕文本的问题。

我希望我的项目的内容居中（我已经用 justify-content: center; 完成了）

但是当文本换行时 - 我希望该文本向左对齐。

但是，当文本自动换行时，父元素的宽度自动为 100%。因此，虽然文本左对齐，但内容并没有似乎居中，因为它实际上不能以 100% 的宽度居中。

我希望这是有道理的！

任何帮助都会很棒！

这是我的问题： https://jsfiddle.net/whqbonad/38/

.container {
  width: 300px;
  margin: 0 auto;
 }

.item {
  width: 50%;
  float: left;
  background: #e3e3e3;
  margin: 10px 0;
  padding: 20px;
  box-sizing: border-box;
 
  display: flex;
  justify-content: center;
}

<div class='container'>
  <div class='item'>
    <span>Hello 1</span>
  </div>
  <div class='item'>
    <span>Hello 2</span>
  </div>
  <div class='item'>
   <span>Hello 3</span>
  </div>
  <div class='item'>
    <span>Hello 4</span>
  </div>
  <div class='item'>
    <span>Hello 5</span>
  </div>
  <div class='item'>
    <span>Hello but longer!</span>
    <!-- I want this to be centered, but the text be left aligned -->
  </div>
</div>

【问题讨论】：

我认为这里的问题与stackoverflow.com/questions/41389292 或多或少相同 - 您希望内联元素缩小到与文本内容所需的宽度一样小的宽度。（使用display: table-caption 的解决方案在这里似乎不起作用，不确定在这种情况下是否真的可行。）
移除 flex 并使用 text-align:center
@doğukan 抱歉，我认为我的问题可能令人困惑。我希望跨度居中，但文本内容左对齐。问题是，自动换行导致最后一项的跨度具有全宽。意味着居中什么都不做，因为它不能居中。我希望跨度的宽度是内容的宽度。我认为这是一个包装问题，但我不太明白

标签： html css

【解决方案1】：

这段代码可以正常工作

.container {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

.item {
  flex-basis: 50%;
  background: #e3e3e3;
  margin: 10px 0;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

span {
  display: block;
  width: 80%;
  background: red;
  text-align: left;
  height: 100%;
}

<div class='container'>
  <div class='item'>
    <span>Hello 1</span>
  </div>
  <div class='item'>
    <span>Hello 2</span>
  </div>
  <div class='item'>
    <span>Hello 3</span>
  </div>
  <div class='item'>
    <span>Hello 4</span>
  </div>
  <div class='item'>
    <span>Hello 5</span>
  </div>
  <div class='item'>
    <span>Hello but longer!</span>
  </div>
</div>

【讨论】：

所有其他更改都是不必要的。 text-align: center 完成这项工作。
是的，但是看我的代码是固定hello 5 列和Hello but longer! 的高度，并且更改的结构更加灵活
对不起，我想我的问题可能令人困惑。我希望跨度居中，但文本内容左对齐。问题是，自动换行导致最后一项的跨度具有全宽。这意味着居中什么都不做，因为它不能居中。我希望跨度的宽度是内容的宽度。我认为这是一个包装问题，但我不太明白
哦。我编辑了我的答案