span要素を中央寄せする方法をサンプルコード付きで紹介!
span要素を中央寄せする方法をサンプルコード付きで解説します。span要素を中央寄せさせる方法には様々な方法があり、それぞれ使いどころが違ってきますので、今回紹介する方法はすべて押抑え、実際に使えるようにマスターしてください。
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;
}
【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!