cssで画像とテキストを中央揃えにする方法

勉強になったので備忘録。

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のスターハックの記法なんて、つい最近知りました。
やっぱり人の書いたコードを読んで自分で書くのが一番の勉強ですね。

まだまだ頑張ります!!

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です