中央揃えの見出し(div)の右端にボタンを追加したい

リストのヘッダー部右端（下のイメージのオレンジの部分）に
ボタンを追加したいのですが、
見出し(「リスト１」の部分)の位置を中央に保ったままボタンを追加する方法をお教えいただきたく投稿しました。

ボタンをfloat:right;で追加したのですが、
見出しがボタン分左にずれてしまうのを回避する方法を探し出せませんでした。
よろしくお願いいたします。

現在のHTMLとCSSも記載しておきます。
(background-color等省略していますご了承ください。)

HTML
1<div class="flame">
2  <div class="listHeader">
3    リスト１
4    <input type="button" class="xxBtn" value="××" >
5  </div>
6  <ul class="list">
7　  <li>項目名１</li>
8　  <li>項目名２</li>
9    ～以下省略～
10  </ul>
11</div>

css
1.flame{
2  width: 200px;
3}
4.listHeader{
5  font-size: 14px;
6  font-weight: 600;
7  text-align: center;
8  padding: 4px 0px;
9}
10.xxBtn{
11  float:right;
12  font-size:12px;
13  padding-top: 0px;
14  padding-left: 0px;
15  width: 40px;
16}

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

回答1件

ベストアンサー

ボタンにposition: absolute;を指定する方法が楽だと思います。

CSS
1.listHeader{
2  font-size: 14px;
3  font-weight: 600;
4  text-align: center;
5  padding: 4px 0px;
6
7  /* 追加 */
8  position: relative;
9}
10.xxBtn{
11  /* float:right; */
12  font-size:12px;
13  /* padding-top: 0px; */
14  /* padding-left: 0px; */
15  width: 40px;
16  
17  /* 追加 */
18  height: 20px;
19  margin: auto 0;
20  display: block;
21  position: absolute;
22  top: 0;
23  bottom: 0;
24  right: 10px; /* 右側の余白。好きな値に設定してください。 */
25}