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;
}
GeekHive採用サイト

関連記事