html - 无法将带有换行文本的元素居中，因为文本换行将父级设置为 100% 宽度

Question

这个问题在这里已经有了答案:





Make container shrink-to-fit child elements as they wrap

(4 个回答)



CSS when inline-block elements line-break, parent wrapper does not fit new width

(2 个回答)


6 个月前关闭。




我遇到了换行文本的问题。
我希望我的元素的内容居中(我已经完成了 justify-content: center; )
但是当文本换行时 - 我希望该文本向左对齐。
但是，当文本换行时，父元素的宽度自动为 100%。因此，虽然文本左对齐，但内容似乎没有居中，因为它不能真正以 100% 宽度居中。
我希望这是有道理的!!
任何帮助都会很棒!
这是我的问题的 fiddle :
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>

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