ホームページのネタ帳

画像横のテキストを上下中央に配置する方法

2012年1月13日

画像横のテキストを ↓ のように画像の上下中央部に配置する方法をご紹介します。

 

【htmlソース】

<div class=”test”>
<p><img src=”images/image.gif” alt=”画像” width=”150″ height=”250″ /></p>
<p>
テキストが入ります<br />
テキストが入ります<br />
テキストが入ります<br />
テキストが入ります<br />
テキストが入ります<br />
テキストが入ります
</p>
</div>

【css】

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;
}

display: table-cell;とvertical-align: middle;でIE以外のブラウザで上下中央に配置できます。

IEはIE用のハックで対応します。

 

これで画像横のテキストの文字数が増減しても、必ず画像の上下中央にテキストが配置されるので、

見た目にもキレイなレイアウトになると思います。

ぜひ活用してみてください!

 

 

 

 


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp