span要素を中央寄せする方法をサンプルコード付きで紹介!

span要素を中央寄せする方法をサンプルコード付きで解説します。span要素を中央寄せさせる方法には様々な方法があり、それぞれ使いどころが違ってきますので、今回紹介する方法はすべて押抑え、実際に使えるようにマスターしてください。

コンテンツ [表示]

  1. 1span要素を中央寄せしたい
  2. 2span要素を中央寄せする方法
  3. 2.1positionプロパティを使う方法
  4. 2.2divタグで囲う方法
  5. 2.3displayプロパティを使う方法

span要素を中央寄せしたい

センタリング(中央寄せ)する方法として代表的なのはtext-align:center;だと思います。しかし、spanタグには使うことができません。

今回は上記のサンプルコードのように、span要素をセンタリング方法を解説します。

span要素を中央寄せする方法

positionプロパティを使う方法

まず紹介するのはpositionプロパティとtransformプロパティを使った方法です。

以下のサンプルコードをご覧ください。

positionプロパティ

.container{
  position: relative;
}

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

まず親要素にposition:relative;を指定します。

そして、absoluteに指定したspan要素をtopプロパティとleftプロパティで50%の位置に配置、その後transformプロパティで要素自体の大きさ分元に戻します。

そうすることで、span要素を中央寄せすることができます。

divタグで囲う方法

次に紹介するのはdivタグで囲む方法です。

div要素にはtext-align:center;が効くので中央寄せすることができます。

divタグ

<div>
  <span>span要素</span>
</div>

displayプロパティを使う方法

最後に紹介するのはdisplayプロパティでblockを指定する方法です。spanタグはinline要素なので、そのままではtext-alignプロパティが効きません。

そこで、spanタグにdisplayプロパティでblockを指定することでtext-alignプロパティを効かせることができます。

 

displayプロパティ

span{
  display: block;
  text-align: center;
}
今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。