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