CSSで簡単に画像の横にあるテキスト上下中央に配置する
- Category ：
- 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で２点ほど質問させていただきたいのですが。
まず１点目
当方のブログ内で、画像の横に表示するテキストがbrタグを使わずに長くなってしまうとIE7と8では横に表示されず下に回ってしまいます。
できれば画面の幅で勝手に改行してくれるとありがたいのですが。
無理なのでしょうか？
２点目です。
画像を左、右とちどりに配置したいのですが、左側は揃うのですが右側は左にあるテキストの長さでバラバラな配置になってしまいます。
右側の画像も右端に揃えたい場合どの様に設定するといいのでしょうか？
質問ばかりで申し訳ありません。
今年に入ってcssを勉強し始めたばかりで・・・
解らない事ばかりです。
お忙しい中、御教授願えると幸いです。
こちらのサイトでは私にも理解しやすく書かれていて大変勉強になります。
（40歳過ぎるとなかなか頭に入りませんが。笑）
ご迷惑でしたら無視してください。