画像を上下中央揃えさせる方法はいくつもありますが、完璧な方法はありませんでした。その中でも一番、完璧に近い方法がありましたので紹介します。

http://codepen.io/sebastianekstrom/full/kzEhe

一行でも、数行にわたる文字でも、画像でも上下中央を実現しているのを見て頂けたと思います。しかも、全て同じコードで実現出来てしまいます。では具体的なコードです。

文字の場合

CSSのコード

注意:高さを設定しておかないと、枠をはみ出てしまい正常に上下中央に表示されません。

HTMLのコード

以上です。

スポンサー

画像の場合

念の為、画像の上下中央揃えのコードも書いておきます。

CSSのコード

注意:高さを設定しておかないと、枠をはみ出てしまい正常に上下中央に表示されません。

HTMLのコード

 

 

 

スポンサー

お問い合わせ

この記事についてご質問があれば、お問い合わせ下さい。

お名前(必須)
お名前フリガナ(必須)
メールアドレス(必須)
メールアドレス確認(必須)
お問い合わせ記事URL
お問い合わせ内容(必須)