右对齐居中文本下的div

Question

我有我的主要内容div，我想创建一个以此父div为中心的标题，然后在其下方有一个副标题，右边对齐居中文本的边缘。我一直很难实现这个工作，而且我可以在这个网站上找到的所有例子和其他人在顶部文本居中时似乎搞砸了（而不是说，左边对齐父母）格）。

它应该看起来像这样（App Title以更大的div为中心）：

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

标题div需要是可变宽度的，我不需要支持古老的浏览器。谢谢你的帮助！

Answer 1

以下是两种方式，一种使用flex，另一种使用inline-block。基本上为标题创建一个容器，将容器居中，然后将字幕右对齐。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;