１行に中央揃えと右詰めをしたい。

困っていること

１行に中央揃えと右詰めのテキストを作成したいのですがうまくいきません。

やりたいこととしては
中央にclass="user-h2
右端にclass="user-count"
と考えています。

該当ソースコード

user.html.erb

<div class="titlebar">
        <h2 class="user-h2">あなたの質問</h2>
        <p class="user-count"><%= @user.entries.count %>件中<%= @entries.count %>件を表示</p
</div>

css

.user-h2{
  font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  text-align: center;
  color: #202020;
  margin: 0;
}

.user-count{
  font-size: 15px;
}

試してみたこと

色々と試してみました。正直CSSでここまで苦労するとは思いませんでした。

<h2></h2>で一括りにしすれば１行にまとめることができ、.user-countにpadding-leftを使用することで、それらしくはなりますが、どのサイズの画面から見ても.user-h2を中央にしたいため、この方法はダメでした。参考サイトをみながらfloatを使用も試みましたが、どうも１行にまとまりません。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.titlebar {
2  position: relative;
3}
4.user-h2{
5  font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
6  text-align: center;
7  color: #202020;
8  margin: 0;
9}
10
11.user-count{
12  font-size: 15px;
13  position: absolute;
14  top: 0;
15  right: 0;
16}