span要素にtext-alignで右寄せする方法を紹介！

span要素でtext-alignを効かせて、右寄せしたり、センタリングをしたりしたいという時があります。

しかしspan要素そのものに、ただ単にCSSでtext-alignだけを設定してもtext-alignを効かせることはできません。

ではどうしたらいいのかを以下の項目で解説します。

span要素にtext-alignで右寄せするにはまず、text-alignの特性を知る必要があります。

text-alignは通常ブロックレベル要素に設定し、そのブロックレベル要素の中身を左寄せ、センタリング、右寄せさせます。

ここでなぜspan要素にはtext-alignが効かないかと言うと、span要素はインライン要素だからです。

ですのでspan要素にtext-alignで右寄せするには、span要素にdisplay: block;を設定するか、span要素をブロックレベル要素であるdiv要素などで囲んで、div要素にtext-alignを設定する必要があります。

このようにspan要素をブロックレベル要素に変換することで、無事に右寄せされていることが分かります。

こちらのやり方でもspan要素を右寄せできます。span要素をdiv要素などブロックレベル要素で囲み、そのブロックレベル要素に対してtext-align: right;を指定します。

このように右寄せされていることが分かります。

いかがでしたでしょうか？

ここで紹介した方法を用いてぜひspan要素をtext-alignにて、左寄せ、センタリング、右寄せさせてみてください。

またここで紹介したのはspan要素にtext-alignで右寄せする方法ですが、同じ要領で以下の記事でspan要素を中央寄せする方法も解説しているので参照してください。