2014年3月31日

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

サイトを作成中、どうしても<span>テキスト</span>の部分を中央寄せにすることができませんでした。ぐぐってもなかなか目当ての書き方が掲載されているサイトがありませんでした。
どうやら、<span>を<div>にしなければ中央寄せにならないようです。しかし、諦めずに調べ続けた結果、<span>内のテキストを中央寄せにする方法を見つけることが出来ました。

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

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

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

この情報を共有する

0 件のコメント :

コメントを投稿

Related Posts Plugin for WordPress, Blogger...