换行时如何使“文本对齐：左”居中？答案

【问题标题】：How to center "text-align: left" when wrapping text?换行时如何使“文本对齐：左”居中？
【发布时间】：2020-08-29 03:34:56
【问题描述】：

我正在寻找一种方法，让我的标题文本始终居中，但让它在左侧而不是中心环绕，这是我到目前为止的标记：

.title-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(#900, #990);
}

.title-container__text {
  flex: 0 1 auto;
  font-size: 80px;
  color: #ddf;
}

<div class="title-container">
  <h1 class="title-container__text">Gran Teatro Sara</h1>
</div>

这会保持文本居中，直到屏幕尺寸太小并且文本必须换行，一旦它换行，整个文本就会向左对齐并在右侧留下一个大空间......我想要保持这样的文本换行，但左右两边的空间相等。

我希望我说清楚了。

我会用一些视觉效果来解释自己，居中和环绕的当前行为如下所示：

上面的例子在大屏幕观看时效果很好

当屏幕变小时，文本会按我的意愿换行，但文本不再居中。我想要的结果是这样的：

【问题讨论】：

听起来您希望将文本框放在另一个（不可见）框内，该框具有左/右边距，因此您的文本框在内部是左对齐的，但该框本身是居中的。 Flexbox 可能可以做到这一点，但我无法告诉你我是怎么想的。

标签： html css

【解决方案1】：

一种解决方案可能是在任一侧使用flex: 1 和您选择的最大宽度（像素或百分比）添加排水沟，如以下 sn-p：

.title-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background-image: linear-gradient(#900, #990);
}

.title-container__text {
  flex: 1;
  font-size: 80px;
  color: #ddf;
}


.gutter {
  flex: 1;
  max-width: 10%
}

<div class="title-container">
  <div class="gutter"></div>
  <div class="title-container__text">Gran Teatro Sara</div>
  <div class="gutter"></div>
</div>

【讨论】：

我将不得不看看这个解决方案，你分享的代码在大屏幕尺寸的右侧增加了太多的排水沟。无论如何，非常感谢，现在我有一个替代方案。

【解决方案2】：

添加“文本对齐：居中；”到您的 .title-container CSS。

.title-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(#900, #990);
}

.title-container__text {
  flex: 0 1 auto;
  font-size: 80px;
  color: #ddf;
}

<div class="title-container">
  <h1 class="title-container__text">Gran Teatro Sara</h1>
</div>

【讨论】：

您正在尝试保持文本换行并使换行的文本居中？