【CSS】画像(アイコン)とテキストを上下中央よせ横並びする方法まとめ

HTML/CSS

画像(アイコン)とテキストを中央よせ横並びにする方法

今回紹介する方法
  • background-positionを利用する方法
  • vertical-alignを利用する方法
  • absolute/relativeを利用する方法
  • Flexboxのjustify-content/align-itemsを利用する方法
  • Flexboxとabsolute/relativeを組み合わせる方法

以下ではそれぞれの方法について紹介します。

background-positionを利用する方法

テキストの要素を横幅と高さがあるテキストエリアにし、画像をテキストエリアの背景にします。そしてbackground-positionで背景の位置、つまり画像の配置位置を決定する方法です。

background-positionを利用して画像を配置する場合、位置によってはテキストと画像が重なる場合があるため、必要に応じてテキスト要素にpaddingを適用します。

<p class="text">サンプルテキスト</p>

.text {
  /* テキストエリアの作成と、テキストの上下中央よせ */
  padding-top: 20px;
  padding-bottom: 20px;

  padding-left: 60px; /* 画像の配置場所を確保 */
  background-image: url(https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png); /* 画像URLを指定 */
  background-position: left center; /* 画像の位置 */
  background-size: 50px 50px; /* 画像のサイズ */
  background-repeat: no-repeat; /* 背景画像の繰り返しなくす */
  background-color: yellow;
}

See the Pen
Untitled
by Toshiharu Nishina (@nishina555)
on CodePen.

vertical-alignを利用する方法

横並びインライン要素の上下方向の位置を調整するvertical-alignを利用した方法です。

テキストと画像のHTMLタグをそれぞれ用意する方法(擬似要素を利用しない方法)

インライン要素でテキストと画像を用意して横並びを実現し、vertical-alignで配置位置を調整する方法です。

<img class="image" alt="icon" src="https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png" />
<p class="text">サンプルテキスト</p>

.image {
  vertical-align: middle; /* 上下中央寄せ */

  /* 画像のサイズ */
  width: 50px;
  height: 50px;
}

.text {
  display: inline-block; /* インライン要素にして横並びを実現 */
  vertical-align: middle; /* 上下中央寄せ */
  background: yellow;
}

See the Pen
icon-text-lines-vertical-align
by Toshiharu Nishina (@nishina555)
on CodePen.

擬似要素を利用する方法

画像の要素を用意する代わりにテキストの擬似要素を利用する方法です。
【CSS】疑似要素の画像サイズを変更する方法でもこちらの方法が紹介されています。
擬似要素にdisplay: inline-blockを適用することでインライン要素の特性である横並びと、ブロック要素の特性であるサイズ指定を両方実現できるようにします。

今回のように画像URLを利用してアイコンを表示する場合、擬似要素のcontentプロパティに値を設定する必要はありません。
しかし、擬似要素before/afterの概要と具体例でも紹介した通り、contentプロパティの定義自体は必須です。

<p class="text">サンプルテキスト</p>

.text {
  background: yellow;
}

.text::before {
  content: ''; /* 必須 */
  display: inline-block; /* インラインブロック要素にして横並びと、横幅・高さの指定をできるようにする。 */

  background-image: url(https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png); /* 画像URLを指定 */
  vertical-align: middle; /* 上下中央寄せ */

  /* 画像のサイズ */
  width: 50px;
  height: 50px;

  background-size: contain; /* 『疑似要素の大きさ = 画像の大きさ』にする */
}

See the Pen
icon-text-lines-vertical-align-before
by Toshiharu Nishina (@nishina555)
on CodePen.

absolute/relativeを利用する方法

画像の要素にposition: absoluteを適用することで任意な位置に画像を配置する方法です。
position: absoluteを利用して画像を配置する場合、位置によってはテキストと画像が重なる場合があるため、必要に応じてテキスト要素にpaddingを適用します。

なお、absolute/relativeの詳細解説はabsoluteとrelativeの利用方法と、中央寄せ・隣接・重ね合わせの具体例で紹介しています。

テキストと画像のHTMLタグをそれぞれ用意する方法(擬似要素を利用しない方法)

<div class="container">
  <img class="container__image" alt="icon" src="https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png" />
  <p class="container__text">サンプルテキスト</p>
</div>

.container {
  position: relative;
}

.container__text {
  /* テキストエリアの作成と、テキストの上下中央よせ */
  padding-top: 20px;
  padding-bottom: 20px;

  padding-left: 60px; /* 画像の配置場所を確保 */
  background: yellow;
}

.container__image {
  position: absolute;

  /* 上下中央よせ */
  top: 0;
  bottom: 0;
  margin: auto;

  /* 画像のサイズ */
  width: 50px;
  height: 50px;
}

See the Pen
icon-text-lines-absolute
by Toshiharu Nishina (@nishina555)
on CodePen.

擬似要素を利用する方法

【CSS】relative/absoluteの作成方法で紹介している通り、relative/absoluteは擬似要素でも作成可能です。ここで紹介する方法は画像の要素を用意する代わりにテキストの擬似要素を利用しています。

<p class="text">サンプルテキスト</p>

.text {
  position: relative;

  /* テキストエリアの作成と、テキストの上下中央よせ */
  padding-top: 20px;
  padding-bottom: 20px;

  padding-left: 60px; /* 画像の配置場所を確保 */
  background: yellow;
}

.text::before {
  content: ''; /* 必須 */
  position: absolute;
  background-image: url(https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png); /* 画像URLを指定 */

  /* 上下中央よせ */
  top: 0;
  bottom: 0;
  margin: auto;

  left: 0; /* 左よせ */

  /* 画像のサイズ */
  width: 50px;
  height: 50px;

  background-size: contain; /* 『疑似要素の大きさ = 画像の大きさ』にする */
}

See the Pen
icon-text-lines-absolute-before
by Toshiharu Nishina (@nishina555)
on CodePen.

Flexboxのjustify-content/align-itemsを利用する方法

Flexコンテナを親要素に用意し、画像とテキストをFlexアイテム化することで配置位置を決定する方法です。
Flexコンテナの配置方法を決定するalign-itemsjustify-contentを利用して位置を調整します。

なお、Flexboxの詳細解説はFlexboxの概要と使いどころで紹介しています。

<div class="container">
  <img class="container__image" alt="icon" src="https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png" />
  <p class="container__text">サンプルテキスト</p>
</div>

.container {
  display: flex;
  align-items: center; /* 上下中央よせ */
  background: pink;
}

.container__text {
  background: yellow;

}
.container__image {
  /* 画像のサイズ */
  width: 50px;
  height: 50px;

  margin-right: 10px; /* テキストとの余白 */
}

See the Pen
icon-text-lines-flexbox
by Toshiharu Nishina (@nishina555)
on CodePen.

Flexboxとabsolute/relativeを組み合わせる方法

Flexboxでテキストと画像の配置方法を決定し、absolute/relativeで画像の配置位置を調整する方法です。

テキストと画像のHTMLタグをそれぞれ用意する方法(擬似要素を利用しない方法)

<div class="container">
  <img class="container__image" alt="icon" src="https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png" />
  <p class="container__text">サンプルテキスト</p>
</div>

.container {
  display: flex;
  position: relative;

  /* Flexアイテム(ここでいうテキスト)を上下左右中央よせ */
  align-items: center;
  justify-content: center;

  /* Flexコンテナの領域を作成 */
  width: 300px;
  height: 100px;

  background: pink;
}

.container__text {
  background: yellow;
}

.container__image {
  position: absolute;
  left: 10px; /* Flexコンテナから見て左10pxの位置に配置 */

  /* 画像のサイズ */
  width: 50px;
  height: 50px;
}

See the Pen
icon-text-lines-flexbox-absolute
by Toshiharu Nishina (@nishina555)
on CodePen.

擬似要素を利用する方法

<div class="container">
  <p class="container__text">サンプルテキスト</p>
</div>

.container {
  display: flex;
  position: relative;

  /* Flexアイテム(ここでいうテキスト)を上下左右中央よせ */
  align-items: center;
  justify-content: center;

  /* Flexコンテナの領域を作成 */
  width: 300px;
  height: 100px;

  background: pink;
}

.container__text {
  background: yellow;
}

.container__text::before {
  content: '';
  position: absolute;
  background-image: url(https://user-images.githubusercontent.com/3121046/161166932-90060d9f-cba3-48f2-807f-f5308ee0b0d3.png); /* 画像URLを指定 */

  /* 上下中央よせ */
  top: 0;
  bottom: 0;
  margin: auto;

  left: 10px; /* Flexコンテナから見て左10pxの位置に配置 */

  /* 画像のサイズ */
  width: 50px;
  height: 50px;

  background-size: contain; /* 『疑似要素の大きさ = 画像の大きさ』にする */
}

See the Pen
icon-text-lines-flexbox-absolute-before
by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです!

参考資料