cssで要素を上下で揃えたい時について

サイト作ってると、要素の上下を中央に揃えたいときって結構多くありません？そしてその方法で毎回悩んでたりしません？僕はいつも悩んでます。

なので、せっかくだから一度ちゃんと覚え直してみました。ちゃんと調べたら大したことではなかったのでここに書いていつでも読めるようにしておこうと思います。おぉ、何だか技術ブログみたいですね。お久しぶりです、むゆう([tw_link name=”anticyborg”])です。

一応それようの指定方法は存在する

さて、要素を上下で揃えたい時は、何となくそれ用の指定「vertical-align : middle;」があるのはご存じの方も多いと思うのですが、このして、効かないことが多くないですか？それ、解決してしまいましょう。

こういった要素を縦並びにしたい場合、

こうやりがちですが、これだと上手く効きません
これは、「vertical-align はインライン要素にしか適用されない」というルールがあるからです。

ということは、解決方法はいたって簡単。インライン要素に指定しましょう。

.box に指定するのではなく、.box の中にある要素に指定すれば良いみたいです。

揃えたい要素がボックス要素の場合は？

また、今のはインライン要素に指定をしていましたが、上下そろえしたい要素がボックス要素の場合はこれだともちろん効きません。

こんな感じのhtmlで、#king と #queen を上下揃えにしたい場合

まずは #king と #queen を display : table-cell; します

すると、 display : table-cell; を指定することで、勝手にインライン要素になります。なので、必然的に要素が横並びになりますね。

すると、先ほどの

「vertical-align はインライン要素にしか適用されない」というルールがあるからです。

このルールが適用されますので、同様に指定しましょう。

完成(/’□’)/ そして愛すべきIEちゃんへ

これで完成です。

ただし、どうやらこのままではIE6、7には適用されません。
(そいつらは display : table-cell ; を知らないらしいです)

なので、IE6、7向けに指定を追加します。

IE用に、インラインにして、かつレイアウト情報を持たせるため、

• display:inline;
• zoom:1;

を追加しました。

いかがでしょうか。
たまにはこんなライトな記事も良いですね、書きやすくて。