page_adsence

2011年4月4日月曜日

CSSで上下に中央寄せする方法

ここに書かれていた。
書き方としては以下の通り。
IE6と7以外に関してはtable-cellを使う。
IE6と7に関してはインライン要素として扱うと、「vertical-align」が使えるようになるので、下記のような記述になっている。
ちなみに下記に書かれている「* html」はIE6用のハックで、「*:first-child+html」はIE7用のハックである。
これを記述した場合にはそれぞれのブラウザでしか反映しないに出来る。

div {
    display:table-cell;
    margin-bottom:1px;
    vertical-align:middle;
}

/* IE 6 hack */
* html div {
    display:inline;
    zoom:1;
}

/* IE 7 hack */
*:first-child+html div {
    display:inline;
    zoom:1;
}