要素を縦方向に中央揃えさせる方法はたくさんあるのですが、IE7以下にも対応させるとなると、現時点ではかなり面倒な作業となります。方法をいくつかご紹介します。
テキスト1行の場合ーline-heightを使う
親要素の高さと同じline-heightを設定することで縦方向真ん中に配置することができる。
行数2行のテキストの場合ーネガティブマージンを使う
positon:absoluteに設定し、topを50%、top-margin:-1em;に設定。
などなど、他にも状況に応じて様々な設定方法が考えられます。
特に、block要素を縦方向中央揃えの場合は、display:table-cell;にする事で、vartical-allign:middle;を効かせることができる様になります。この場合IE7以下はcss hackを使う必要がある。
検索のヒント
” table-cell ie7 “ ” css 縦方向中央 “