HOME > ウェブデザイン > 【CSS】画像の横に並べたテキストを天地中央揃えにするスタイルシート
公開日:2009.12.12
この記事は約3分で読めます。

【CSS】画像の横に並べたテキストを天地中央揃えにするスタイルシート

この記事は最終更新日から9年以上経過しているため現状にそぐわない可能性もあります。

も・く・じ

商品説明ブロックなどで商品画像の右(左)脇に説明テキストを置くことがよくあるんですが、テキストの位置を商品画像の天地中央に揃えるのがけっこう大変なんです。

そこでそれを簡単にできるCSSを書いておきます。

(<div>が少々増えちゃいますが)

SIRIUSレビューイメージ画像

イメージ

言葉で説明するとわかりにくいですね。

イメージとしては下画像のようなレイアウトになります。

完成イメージ画像

肝は「display」に "table-cell" を指定してあげることで、これで"vertical-align"が有効になります。

HTML

上の画像のようなレイアウトにするにはHTMLに下のように記述します。

(IDやクラス名は適当に)

構図としては<div></div>の中に適当なクラス名を付加した<p>で囲った画像idを付加したテキストを並べて置くイメージでしょうか。

内容次第では<div>がはんざつになりそうなのがちょっと気になるかもしれません。

CSS

CSSの方ですが、大外のid(#sample)には下記のようなスタイルを加筆します。

大外の #sample にはを指定、そして「display」には"table"を指定します。

これによりtable のようなCSSが可能になります。

画像クラスおよび内側のテキスト用idには以下を指定します。

画像とテキスト両方の「display」に"table-cell"を指定してやります。

これでthやtdのような表示になり vertical-align(天地中央揃え)が可能になります。

table-cellをサポートしてないIEには「display」に"inline" を、そしてzoom:1; も指定することで有効になります。

プロパティ先頭の「/」はIE6、7用のCSSハックです。

応用

しかしいつもトップ画像のようなレイアウトだけで事済ませられるわけがありません。

そこで試しにいくつかパラメータを追加・変更してみました。

 

以下のサンプルの全体幅は500px、高さは200pxで固定してあります。

画像は100px四方の正方形を使用しています。

また(わかりやすいように)画像ブロックの背景にはピンクを、テキストブロックの背景にはオレンジを敷いてあります。

1.画像とテキスト部に全く幅を指定しない時の表示イメージ。

画像幅一切指定しない時の表示イメージ

2.画像ブロックに画像幅を超える120pxの幅を指定した表示イメージ。

画像幅に120pxを設定した表示イメージ

3.上記に加え、大外の#sampleに20pxの左余白を足した表示イメージ。

さらに#sample に20pxの余白を足した表示イメージ

4.さらにテキストブロックに20pxの左余白を足した表示イメージ。

テキストブロックに20pxの余白を足した表示イメージ

5.さらに右余白50pxを足した表示イメージ。

さらに右余白50pxを足した表示イメージ

6.最後はテキストブロックの横幅に狭めの100px を足した表示イメージ。

テキストブロックの横幅に狭めの100pxを足した表示イメージ

テキストブロックに少なめの幅を設定すると「右寄せ」っぽくなってしまう理由がいまいちわかってません。

7.いろいろ調整した実際の表示がこちら。

demo

テキスト1、テキスト2、テキスト3、テキスト4、テキスト5、テキスト6、テキスト7、テキスト8、テキスト9、テキスト10、テキスト11、テキス12、テキスト13、テキスト14

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

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

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)