勉強になったので備忘録。
cssで画像とテキストを横に中央揃えするのって、tableに入れないと出来ないと思っていたらこんなやり方がありました。
画像とかの横にあるテキストを上下中央に – CSS HappyLife
↑こちらのかたが詳しく書いてあるので詳しくは省略しますが、
用はボックス要素をdisplay: table-cellに見たてて、
vertical-alignで中央揃えすると出来るとのこと。
このときブロックレベル要素に指定するのではなく、
中にあるインライン要素に指定するのがコツです。
div.Test p {
display: table-cell;
vertical-align: middle;
margin: 0;
}
/*for IE6 */
* html .Test p {
display: inline;
zoom: 1;
}
/*for IE7 */
*:first-child+html .Test p {
display: inline;
zoom: 1;
}
これはいろいろと使えそうです。
お恥ずかしながらIE6/7のスターハックの記法なんて、つい最近知りました。
やっぱり人の書いたコードを読んで自分で書くのが一番の勉強ですね。
まだまだ頑張ります！！
