【CSS】画像の中央にテキストを配置する2つの方法

表示領域に関係なく画像対してテキストを中央に配置する方法として、僕が良く使う2つの方法を紹介します。

スポンサーリンク

背景画像にテキストを中央に配置するやり方

見本とコード

テキスト

<div class="bg_flex">
  <p class="bg_flex_txt">テキスト</p>
</div>
.bg_flex {
  background-image: url(../img/haikei.jpg);
  background-size: cover;
  height: 100vh;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg_flex_txt {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

背景画像にテキストを中央に配置するやり方の解説

背景に対して一般的に使われるのはこのやり方。background-imageとflexを使った方法です。

ブラウザの表示領域によって高さを変動させたくない場合、例えば画面の高さいっぱいに背景を伸ばしたい時はこちらを使います。

ただ、このやり方だとブラウザの表示領域によって背景画像の見えが変わってしまうので、background-positionを使っていい感じに背景画像の位置を調整する必要があります。

スポンサーリンク

画像にテキストを中央に配置するやり方

見本とコード

テキスト

<div class="bg_position">
  <img src="img/haikei.jpg">
  <p class="bg_position_txt">テキスト</p>
</div>
.bg_position {
  position: relative;
}
.bg_position img {
  width: 100%;
}
.bg_position_txt {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

画像にテキストを中央に配置するやり方の解説

コンテンツに対して使うのはこのやり方です。画像にテキストをpositionで被せて位置を指定する方法です。

高さはどうでも良いけど、どの表示領域でも同じ画像を表示したい場合はこちらを使います。

基本背景に対して使う事はあまり無いのですが、PCとスマホで表示する背景画像を別々に指定された時や、複数のテキストを使い位置を微調整したい時などはこちらを使用しています。