Question

我有一个带有一些文本（例如h1）的flex容器，由于容器的宽度而有一个换行符。我试图保持文本内联，以便它不会自动占据容器宽度的100％，因此它保持水平居中，但在容器上使用Flex会破坏它。我尝试在h1上使用align-self: center以及其他一些没有运气的东西。任何帮助将非常感激。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Flexbox：使用换行符水平居中保持文本

1 个答案: