在居中文字下右對齊div

Question

我有我的主要內容div，我想創建一個在此父div中居中的標題，然后在其下方有一個與居中文本的邊緣右對齊的字幕。 我一直很難讓它正常工作，當頂部文本居中時（相對於父級左對齊），我在本網站上可以找到的所有示例以及其他示例似乎都弄糟了。 div）。

它應該看起來像這樣（“應用程序標題”位於較大的div中）：

我能找到的最接近的是這個問題（ 將兩個div右對齊 ），但似乎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>