【CSS】span要素を
センタリングする3つの方法

2018-06-02

「p」タグなどのテキストを中央表示(センタリング)させたい場合、「text-align: center」を指定すると簡単です。

ですが、span要素には「text-align: center」を直接指定しても、センタリングは出来ません。

なるべくカンタンにセンタリングさせたいと調べたところ、span要素をセンタリングするにはいくつか方法がありました。

ここでは、簡単にspan要素を中央表示(センタリング)する方法を3つまとめています。

\項目をタップするとジャンプできます/

HTMLでdiv要素に入れてセンタリング

1つは、span要素をdiv要素に入れて、親div要素に「text-align: center;」を指定する方法。

CSSは1行ですみますが、HTML側でdiv要素を加えないといけないので、ちょっと手間です。

HTML

<div class="box">
<span>スパン要素</span>
</div>
CSS

.box{
  text-align: center;
}

transformでセンタリング

また、transformを使って中央に表示する方法もあります。

CSS

span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

この方法はspan要素に限らず、要素を画面中央に表示する時などにとても便利です。

「position: absolute;」で絶対配置にして、「top: 50%;」「left: 50%;」を指定します。

これだけでは、画面の上から50%、左から50%の位置を 起点に要素が表示されるだけです。

「transform: translate(-50%,-50%);」とすることで、自身の幅と高さ50%を自動で差し引いて、きっちり画面中央に配置することができます。

親要素を基準にセンタリングする場合には、親要素に「position: relative;」を指定しておくひと工夫が要ります。

HTML

<div class="box">
<span>スパン要素</span>
</div>
CSS

.box{
  position: relative;
}
.box span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

この方法は応用が効いて便利なのですが、span要素をセンタリングしたいだけだと、ちょっと大掛かりな感じがします。

displayでセンタリング

一番シンプルなのは、「display:block」と「text-align: center;」の2行だけでセンタリングする方法です。

CSS

span{
  display: block;
  text-align: center;
}

ただspan要素をセンタリングしたいだけなら、この方法が一番シンプルです。

「display: block;」ではなく
「display: inline-block;」でセンタリングすることも出来ます。

その場合は「width: 100%;」も必須になります。

CSS

span{
  display: inline-block;
  width: 100%;
  text-align: center;
}

ここではspan要素に直接指定していますが、一部のspan要素にだけ適用したい場合も多いですよね。

その場合は、classを作って指定してあげればOKです。

HTML

<span class="center">
スパン要素
</span>
CSS

.center{
  display: block;
  text-align: center;
}
SHARE

このサイトについて

「Web Work Plus」はWEB制作・ビジネスのちょい足し情報メデイアです。ちょっとしたハテナをプラスに変える役立つ備忘録を発信中!