CSSで簡単に画像の横にあるテキスト上下中央に配置する

Webサイトを作る時によく画像があり、その横にテキスト文があるデザインってをよく使うと思うんですが、これをfloatを使わずに簡単に出来ちゃう方法を紹介したいと思います。

ポイントはdisplay: table-cell;でIEにはハックで対応です。

…ここからが続き

XHTML

<div class="imgArea">
<p><img src="/log/images/sample_01.gif" alt="" width="150" /></p>
<p>テキスト|テキスト|テキスト|テキスト|<br />テキスト|テキスト|テキスト|テキスト|テキスト|</p>
</div>

CSS

div.imgArea p {  
	display: table-cell;  
	vertical-align: middle;  
	margin: 0;  
}  
* html .imgArea p {  
	display: inline;  
	zoom: 1;  
}  
*:first-child+html .imgArea p {  
	display: inline;  
	zoom: 1;  
} 

今までこういうデザインが来た時はfloatで対応していたんですが、コレを使えば簡単に出来ちゃいます。
仕事でも普通に使えちゃうで、是非みなさんも使ってみて下さい。

Comments

倖介

倖介

はじめまして。
画像とテキストの配置方法を求めてこちらにきました。
求めていた物がこちらに公開されていて大変重宝させていただいております。
cssについて現在書籍等で勉強中なのですが、こちらのcssで2点ほど質問させていただきたいのですが。
まず1点目
当方のブログ内で、画像の横に表示するテキストがbrタグを使わずに長くなってしまうとIE7と8では横に表示されず下に回ってしまいます。
できれば画面の幅で勝手に改行してくれるとありがたいのですが。
無理なのでしょうか?
2点目です。
画像を左、右とちどりに配置したいのですが、左側は揃うのですが右側は左にあるテキストの長さでバラバラな配置になってしまいます。
右側の画像も右端に揃えたい場合どの様に設定するといいのでしょうか?
質問ばかりで申し訳ありません。
今年に入ってcssを勉強し始めたばかりで・・・
解らない事ばかりです。
お忙しい中、御教授願えると幸いです。
こちらのサイトでは私にも理解しやすく書かれていて大変勉強になります。
(40歳過ぎるとなかなか頭に入りませんが。笑)
ご迷惑でしたら無視してください。

2009年04月07日 19:41

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article