bootstrap css パネルタイトルを中央に、アイコンを右端に置きたい

前提・実現したいこと

いつもお世話になっております。

bootstrapのパネルのタイトルを中央にして、タイトルと同じ行の右端にアイコンを置きたいです。

<p class="text-center">タイトル</p> としてしまうと、アイコンが下の行に行ってしまうので書き方が分かりません。イメージはこのような感じです。

cssでtext-align: center;やdisplay: inline-block;等入れてみても上手くいきませんでした。

発生している問題・エラーメッセージ

アイコンが下の行に行ってしまう

該当のソースコード

html
1              <div class="panel panel-default">
2               <div class="panel-heading">
3                 <p class="text-center">タイトル</p>
4                  <a href="#">
5                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
6                  </a>
7               </div>
8               <div class="panel-body">
9                 パネルの内容
10               </div>
11             </div>

試したこと

補足情報（FW/ツールのバージョンなど）

初心者で至らない点がありますがよろしくお願いします。

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

回答1件

ベストアンサー

こちらでいかがでしょうか?

CSS
1.panel-heading {
2  position: relative;
3}
4.panel-heading a {
5  display: block;
6  position: absolute;
7  top: 0;
8  bottom: 0;
9  right: 1em; /* 好きな数値に設定してください */
10  
11  margin-top: auto;
12  margin-bottom: auto;
13  width: 1em; /* 好きな数値に設定してください */
14  height: 1em; /* 好きな数値に設定してください */
15}