css - Flexbox:保持带换行符的文本水平居中

Question

我有一个 flex 容器，其中包含一些文本(例如 h1)，由于容器的宽度而有一个换行符。我试图使文本保持内联，这样它就不会自动占据容器宽度的 100%，从而保持水平居中，但是在容器上使用 Flex 会破坏这一点。我试过在 h1 上使用 align-self:center 和其他一些没有运气的东西。任何帮助将非常感激。

编辑:我想让文本本身保持左对齐，但让 h1 元素在容器内居中。

.container {
  width: 250px;
  background-color: tomato;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 { 
  display: inline; /* should only take as much space as it needs */
  align-self: center; 
}

<div class="container">
   <h1>Text text sdfsdlfkjs</h1>
</div>

Answer 1

这是你要找的吗？

.container {
 width: 250px;
 background-color:tomato;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

h1 {
width: 90%;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}