divにtext-alignは効かないよ?

 SNS ボタンやページネーションなどのブログカスタマイズに関係する要素を中央揃えにする場合、text-align:center; を指定しても効かないといった話をよく聞きます。最悪、マージンやパッディングをがんばって設定すればそれらしくなりますが、もっとスマートな方法で解決したいですよね。今回はこの解決方法と、簡単な text-align に関する解説をしたいと思います。

基本的なtext-alignの使い方

HTML。

CSS。

こうなります。text-align プロパティの初期値は left なので、なくても同じです。

20161016_1

text-alignを指定する際の注意

例えば、span を中央に揃えたいとします。

span を中央に配置したいのだから span に text-align を指定すればいいだろうと考えがちですが、これは失敗します。

この場合には次のように指定します。

span に直接指定するのではなく親要素で指定していることに注意してください。

ブロック要素にはtext-alignは効かない

W3C が HTML5 を勧告したことでブロック要素・インライン要素という分類の方法は廃止されました。が、ブロック要素は幅や高さが設定できるといった、スタイルシートでのデザインにおけるかつての知識が今でも生き残っています。

text-align はブロック要素に効かないというのもそのひとつです。例えば、次のような場合を考えてみます。ここで content クラスの div を中央揃えにしようと text-align を指定してみます。

こうなります。

20161016_2

目的の div に変化はなく、中身のテキストが中央揃えになっています。

ブロック要素を中央揃えにするには

これを解決するには margin を使って次のように指定します。ただし、この方法でブロック要素を中央に配置する場合には、ブロック要素に幅が指定されている必要があります。

うむ。ちゃんとできた。

20161016_3

なぜブロック要素を中央に配置するのに幅の指定が必要なのか知りたければ、背景色を指定してみるとわかりやすいです。

幅を指定しなかった場合、ブロック要素は親要素の 100% まで幅をとってしまいます。当然、この状態では左右のマージンを調整することができないので、margin: 0 auto; を指定するには幅を決めてやる必要があるのですね。

20161016_5

img タグもインライン要素なので、このルールに従って text-align を指定することができます。img を div や p などで囲うのが定番の解決方法でしょうか。

WordPressでの画像の中央揃え

WordPress では記事に画像を貼り付けるのに「メディアを挿入」画面から行うと思いますが、表示設定で中央を選択すると img タグに aligncenter というクラスを設定してくれます。

20161016_6

上で述べたように、中央に配置したいインライン要素そのものに text-align を設定しても効果がないため、text-align をやめて次のようにすると余計な手作業もないのでおすすめです。

margin: 0 auto;での注意点

デザインによっては上下のマージンは残したい場合があると思います。そんなときは margin: 0 auto; より後にマージンを指定してあげればよいです。スタイルシートは最後に指定されたものを採用するというルールを思い出してください。

うっかり上下のマージンまで 0 auto にしてしまい、デザインが崩れて慌てることのないように。

20161016_4

おまけ2:margin: 0 auto; 以外の解決方法

position プロパティと要素の幅の半分をマージンで調整する方法もあるようです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP