SNS ボタンやページネーションなどのブログカスタマイズに関係する要素を中央揃えにする場合、text-align:center; を指定しても効かないといった話をよく聞きます。最悪、マージンやパッディングをがんばって設定すればそれらしくなりますが、もっとスマートな方法で解決したいですよね。今回はこの解決方法と、簡単な text-align に関する解説をしたいと思います。
基本的なtext-alignの使い方
HTML。
1 2 3 4 5 6 7 8 9 10 11 | <div class="test"> <div class="left_text"> 麻婆豆腐 </div> <div class="center_text"> 担担麺 </div> <div class="right_text"> 回鍋肉 </div> </div> |
CSS。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .test { width: 800px; height: 400px; background: #F0F0E8; } .left_text { text-align: left; } .center_text { text-align: center; } .right_text { text-align: right; } |
こうなります。text-align プロパティの初期値は left なので、なくても同じです。
text-alignを指定する際の注意
例えば、span を中央に揃えたいとします。
1 2 3 | <div> <span>四川泡菜</span> </div> |
span を中央に配置したいのだから span に text-align を指定すればいいだろうと考えがちですが、これは失敗します。
1 2 3 | span { text-align: center; } |
この場合には次のように指定します。
1 2 3 | div { text-align: center; } |
span に直接指定するのではなく親要素で指定していることに注意してください。
ブロック要素にはtext-alignは効かない
W3C が HTML5 を勧告したことでブロック要素・インライン要素という分類の方法は廃止されました。が、ブロック要素は幅や高さが設定できるといった、スタイルシートでのデザインにおけるかつての知識が今でも生き残っています。
text-align はブロック要素に効かないというのもそのひとつです。例えば、次のような場合を考えてみます。ここで content クラスの div を中央揃えにしようと text-align を指定してみます。
1 2 3 4 5 | <div class="main"> <div class="content"> 青椒肉絲 </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 | .main { width: 500px; height: 100px; text-align: center; background: #F0F0E8; } .content { width: 200px; height: 50px; background: #F93; } |
こうなります。
目的の div に変化はなく、中身のテキストが中央揃えになっています。
ブロック要素を中央揃えにするには
これを解決するには margin を使って次のように指定します。ただし、この方法でブロック要素を中央に配置する場合には、ブロック要素に幅が指定されている必要があります。
1 2 3 4 5 6 7 8 9 10 11 12 | .main { width: 500px; height: 100px; background: #F0F0E8; } .content { width: 200px; height: 50px; margin: 0 auto; background: #F93; } |
うむ。ちゃんとできた。
なぜブロック要素を中央に配置するのに幅の指定が必要なのか知りたければ、背景色を指定してみるとわかりやすいです。
1 2 3 4 5 | <div class"parent"> <div class="child"> 蒜泥白肉 </div> </div> |
1 2 3 4 5 6 7 8 9 10 | .parent { width: 500px; height: 100px; background: #F0F0E8; } .child { height: 50px; background: #F93; } |
幅を指定しなかった場合、ブロック要素は親要素の 100％ まで幅をとってしまいます。当然、この状態では左右のマージンを調整することができないので、margin: 0 auto; を指定するには幅を決めてやる必要があるのですね。
img タグもインライン要素なので、このルールに従って text-align を指定することができます。img を div や p などで囲うのが定番の解決方法でしょうか。
1 2 3 | <div class="img_center"> <img src="../images/sample.jpg"> </div> |
1 2 3 | .img_center { text-align: center; } |
WordPressでの画像の中央揃え
WordPress では記事に画像を貼り付けるのに「メディアを挿入」画面から行うと思いますが、表示設定で中央を選択すると img タグに aligncenter というクラスを設定してくれます。
上で述べたように、中央に配置したいインライン要素そのものに text-align を設定しても効果がないため、text-align をやめて次のようにすると余計な手作業もないのでおすすめです。
1 2 3 4 | .aligncenter { display: block; margin: 0 auto; } |
margin: 0 auto;での注意点
デザインによっては上下のマージンは残したい場合があると思います。そんなときは margin: 0 auto; より後にマージンを指定してあげればよいです。スタイルシートは最後に指定されたものを採用するというルールを思い出してください。
1 2 3 4 5 6 7 8 9 10 11 | <div class="test"> <div class="example"> 棒棒鶏 </div> <div class="example"> 乾焼蝦仁 </div> <div class="example"> 酸辣湯 </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | .test { width: 500px; height: 250px; background: #F0F0E8; } .example { width: 200px; height: 50px; margin: 0 auto; margin-bottom: 20px; background: #F93; } |
うっかり上下のマージンまで 0 auto にしてしまい、デザインが崩れて慌てることのないように。
Comment