html - 如何使内联元素出现在 flexbox 内

Question

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container span {
  border-bottom: 1px solid red;
}

<div class="container">
  <span>title</span>
  <div class="content">
  </div>
</div>

我希望标题出现在屏幕中间，作为旧的内联元素。但在 flex 容器内，它像 block 级元素一样展开。

我在这里错过了什么？

演示:https://jsfiddle.net/rk5h5ph7/

Answer 1

我不完全明白你想要什么，但请尝试我建议的其中一个。

尝试将此添加到 .container span:

text-align: center;

或将此添加到 .container:

align-items: center;