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