インライン要素<span>を中央寄せにする方法

0
1507

サイトを作成中、どうしても<span>テキスト</span>の部分を中央寄せにすることができませんでした。ぐぐってもなかなか目当ての書き方が掲載されているサイトがありませんでした。

どうやら、<span>を<div>にしなければ中央寄せにならないようです。しかし、諦めずに調べ続けた結果、<span>内のテキストを中央寄せにする方法を見つけることが出来ました。

{
display: inline-block;
width: 100%;
text-align: center;
}

環境によって異なると思いますが、私の場合はこの書き方で中央寄せにする事が出来ました。中央寄せにするといえば、div を作り CSSで margin: 0 auto; にしたり、div align:center; でほとんどのケースは中央寄せにする事ができます。

しかし、プロパティにdisplay: inline-block;を使うところがミソみたいです。
先人の知恵は偉大です。

ゼロからわかる HTML&CSS超入門

コメントを書く

必須項目をご入力ください
必須項目をご入力ください