中央寄せのh1タグ横にボタンを設置

Question

中央寄せしているh1タグの隣にボタンを追加したいのですが、
h1タグとボタンの横幅の中心が真ん中に来てしまいます。
h1の中身が中央に表示されており、その右側にボタンがあるような状態にしたいのですが、
どうすればいいのでしょうか。

Comments

[kei344]

具体的にHTMLおよびCSSなどを質問文に追記してください。

[LibertyBell3]

h1の中身が重要なんですが、記載はなしと…
一応、テキストの場合、画像の場合で回答しておきます。

Answer 1

手がかりが少ないので、憶測での回答です。

headerの中に配置する、非レスポンシブ、
ボタンは画像、または、テキストであっても横幅が固定と仮定します。

h1の内容が画像の場合、

<header>
  <h1>画像</h1>
  <p>ボタン</p>
</header>

header {
  position:relative;
  width:;
  height:;
}

header h1 {
  position:absolute;
  left:;
  top:;
}

header p {
  position:absolute;
  left:;
  top:;
}

width/height/left/top は画像サイズや余白で異なるので、
ご自身で追記してください。
h1のleftは、header width/2-img width/2 で求められます。

h1の内容がテキスト(幅可変)の場合、

<header>
  <h1>テキスト<span>ボタン</span></h1>
</header>

header {
  text-align:center;
}

header h1 {
  padding:30px 0 30px 105px;/*30pxは縦方向の余白、105pxはボタンが100pxで余白が5pxという意味*/
  margin:0 auto;
  width:auto;
  font:その他フォントサイズなど;
}

header h1 span {
  display:inline-block;
  padding-left:5px;
}

とすれば、テキストの文字数や各ブラウザでの差異も関係なく、
テキスト部分はセンタリングされたものと同じ位置に表示されると思います。
例はspanとしましたが、インライン要素の、strongやemでもOKです。

Comments

[callmichael]

ご丁寧な回答ありがとうございました。

Answer 2

h1に入れ子でボタンを配置して、h1にposition relativeを指定、ボタンにposition absoluteで位置指定すれば良いです。