html - 在居中文本下右对齐 div

Question

我有我的主要内容 div，我想创建一个在这个父 div 中居中的标题，然后在下面有一个副标题，它与居中文本的边缘右对齐。我一直很难让它发挥作用，当顶部文本居中时，我在这个网站和其他网站上可以找到的所有示例似乎都搞砸了(而不是，比如说，左对齐到父级分区)。

它应该看起来像这样(App Title 居中在一个更大的 div 中):

我能找到的最接近的问题是这个问题 ( Right-align two divs )，但似乎 float: left 对于完成这项工作非常重要，这似乎不适用于我的情况。其他解决方案似乎涉及 display: table 但我一直在努力获得我想要的效果。

标题 div 需要可变宽度，我不需要支持旧版浏览器。感谢您的帮助!

Answer 1

这里有两种方式，一种使用flex，另一种使用inline-block。基本上为标题创建一个容器，将容器居中，然后将副标题右对齐。

* {margin:0;}
h1 {
  font-size: 3em;
}

.flex {
  display: flex;
  justify-content: center;
}
.flex h2 {
  text-align: right;
}

.ib {
  text-align: center;
}
.ib header {
  display: inline-block;
}
.ib h2 {
  text-align: right;
}

<section class="flex">
  <header>
    <h1>app title</h1>
    <h2>subtitle</h2>
  </header>
</section>

<section class="ib">
  <header>
    <h1>app title</h1>
    <h2>subtitle</h2>
  </header>
</section>