【CSS】インライン要素を縦横中央寄せする方法

Webデザインにおいて、テキストや画像などのインライン要素を縦横中央に寄せる方法は、CSSを使って簡単に実装できます。この記事では、いくつかの実用的な方法を紹介します。

line-height を使う方法

この方法は、要素の高さがわかっている場合に適しています。

<div class="container">
  <span class="centered">テキスト</span>
</div>

<style>
.container {
  height: 200px; /* 親要素の高さを設定 */
  line-height: 200px; /* 親要素の高さと同じ line-height を指定 */
  text-align: center; /* 横方向中央寄せ */
}

.centered {
  display: inline-block; /* インライン要素をブロックレベルに変更 */
  vertical-align: middle; /* 縦方向中央寄せ */
}
</style>

Flexbox を使う方法

Flexbox を使うと、要素の高さが不明な場合や複数の要素を中央寄せする際に便利です。

<div class="container">
  <span class="centered">テキスト</span>
</div>

<style>
.container {
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
  align-items: center; /* 縦方向中央寄せ */
  height: 200px; /* 親要素の高さを設定 */
}
</style>

CSS Grid を使う方法

CSS Grid を使うと、より柔軟にレイアウトを調整できますが、簡単な中央寄せにはややオーバーキルかもしれません。

<div class="container">
  <span class="centered">テキスト</span>
</div>

<style>
.container {
  display: grid;
  place-items: center; /* グリッドアイテムを中央に配置 */
  height: 200px; /* 親要素の高さを設定 */
}
</style>

まとめ

これらの方法を使うことで、さまざまな要素を縦横中央に寄せることができます。あなたのデザインに合わせて適切な方法を選んでください。