无法将具有换行文本的元素居中，因为文本换行会将父元素设置为100%的宽度。

17 浏览
0 Comments

无法将具有换行文本的元素居中，因为文本换行会将父元素设置为100%的宽度。

我有一个关于文本换行的问题。\n我希望我的项目的内容居中（我已经用justify-content: center;实现了）。\n但是当文本换行时，我希望该文本对齐到左侧。\n然而，当文本换行时，父元素的宽度会自动变为100%。所以虽然文本是左对齐的，但内容似乎并不居中，因为无法通过100%的宽度来实现居中。\n希望我表达清楚了！\n任何帮助都将非常感谢！\n这是我问题的一个示例：\nhttps://jsfiddle.net/whqbonad/38/\n

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

\n

    Hello 1
    Hello 2
   Hello 3
    Hello 4
    Hello 5
    Hello but longer!

0

1 答案

0 Comments

问题出现的原因是text wrapping导致父元素的宽度设置为100%，从而导致无法居中元素。解决方法是将span元素的display属性设置为inline-block，同时移除height属性的设置。

以下是解决问题的代码：

.item span {
  display: inline-block;
  background: red;
  text-align: left;
}

整理后的文章如下：

这段代码本应该正常工作：

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



  

    Hello 1
  

  

    Hello 2
  

  

    Hello 3
  

  

    Hello 4
  

  

    Hello 5
  

  

    Hello but longer!

除此之外，其他的更改都是不必要的。text-align: center属性已经完成了居中的工作。

是的，但是请看，我的代码修复了"Hello 5"列和"Hello but longer!"的高度，并且结构变得更加灵活。

抱歉，我想我的问题可能有点令人困惑。我希望span元素居中，但文本内容仍然左对齐。问题是，单词换行导致最后一个项目的span元素具有满宽度。这意味着居中对其没有任何效果，因为它无法居中。我希望我的span元素的宽度与内容的宽度相同。我认为这是一个换行的问题，但我不太理解。问题的解决方法是将span元素的display属性设置为inline-block，并移除height属性的设置。

以下是解决问题的代码：

.item span {
  display: inline-block;
  background: red;
  text-align: left;
}

0