HTMLで画像の上に要素をセンタリングする方法【メンターが回答】

「HTMLとCSSで画像の上に要素をセンタリングする方法がわかりません。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。画像の中央に文字とボタンを重ねる方法についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

HTMLで画像の上に要素をセンタリングする方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

画像の中央に文字とボタンを重ねたいのですが、センタリングすることができません。

どうすれば画像の上、中心に文字、ボタンをセンタリングできますでしょうか?

 

該当のソースコード

HTML

<figure class="head">
         <img src="img.jpg">
         <figcaption class= "absolute">
             <h1>
                 <p>COPYCOPYCOPYCOPY(h1)</p>
             </h1>

             <br>
                 <a class="btn" href="#">BUTTON</a>
             <br>

         </figcaption>
     </figure>

.img img {
  display: block;
  margin: 0 auto;
  width:640px;
}

CSS

.imgtxt h1{
  position: absolute;
  text-align:center;
  color: #fff;
}

.btn {
  border: 5px solid #FFF;
  color: #FFF;
  padding:10px 40px;
  width: 300px;
  text-decoration: none;
  margin: 0 auto;
}

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

メンターからの回答

CSSにハマると結構時間かかりますよね。

頂いたソースには試行錯誤の結果だと思うのですが不要なclassなどが多々みられます。一旦HTMLの構造を整理してみましょう。

ものすごく単純化すると次のようになります。

<figure>
  <img>
  <figcaption>
    <h1></h1>
    <a></a>
  </figcaption>
</figure>

よって <figure> 内の <img> に <figcaption> を重ねれば良い、ということになります。基本的には absolute を使用することは間違っていないのですが、

  • <figure> に対して内部で相対位置を使用するために position: relative を指定する
  • <img> を <figure> 内部を満たすように width などを指定する
  • <figcaption> に position: absolute を指定する。top, bottom, left, right などを使って表示位置を調整する

ということが必要になります。

以下頂いたソースを編集するならこうするかなという例です。

<html>
<head>
  <style>
    .head {
      margin: 0 auto;
      width: 640px;
      position: relative;
    }

    .head img {
      width: 100%;
    }

    .absolute {
      bottom: 0;
      margin: 40px auto;
      position: absolute;
      width: 100%;
    }

    .txt {
      color: #fff;
      margin: 0 auto;
      text-align:center;
    }

    .btn {
      border: 5px solid #FFF;
      color: #FFF;
      display: block;
      margin: 0 auto;
      padding: 10px 40px;
      text-align: center;
      text-decoration: none;
      width: 300px;
    }
  </style>
</head>
<body>
  <figure class="head">
    <img src="img.jpg">
    <figcaption class="absolute">
      <h1 class="txt">
        <p>COPYCOPYCOPYCOPY(h1)</p>
      </h1>
      <a class="btn" href="#">BUTTON</a>
    </figcaption>
  </figure>
</body>
</html>

 

以上、HTMLで画像の上に要素をセンタリングする方法について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

HTMLで画像の上に要素をセンタリングする方法について解説したよ。

大石ゆかり

親要素にposition:relativeを指定するのはなぜですか?

田島悠介

そうして置くと文字や画像を重ねる時に続くpositionで、その親要素を基準にすることが出来るんだよね。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。