中央揃えのテキストの下にdivを右揃え

Question

私はメインのコンテンツdivを持っています。この親divの中央に配置されているタイトルを作成し、その下に字幕を中央揃えの端に右揃えにしたいテキスト。私はこれをうまく動作させるのに本当に困難な時間を抱いていました。このサイトや他の例で見つけることができるすべての例は、トップのテキストが中央に置かれたときに混乱するようです（反対に、 div）。

（アプリのタイトルは、より大きなdivの中で中心にされている）それは次のようになります。

私は見つけることができる最も近いが、この質問（Right-align two divs）ですが、float: leftは、この作品を作るために非常に重要であると思われます私の場合はうまくいかないようです。他の解決策にはdisplay: tableが含まれているようですが、私が望む効果を得るためには苦労していました。

タイトルの欄の幅は可変である必要があり、古代のブラウザをサポートする必要はありません。助けてくれてありがとう！

Answer 1

flexを使用する方法とinline-blockを使用する方法の2通りがあります。基本的には、タイトルのコンテナを作成し、そのコンテナを中央に置き、サブタイトルを右揃えにします。

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