loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS】画像の横に並べたテキストを天地中央揃えにするスタイルシート
この記事は約3分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2009.12.12

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

そこでそれを簡単にできる CSSを書いておきます。
(<div>が少々増えちゃいますが)

 

言葉で説明するとわかりにくいですね。
イメージとしては下画像のようなレイアウトになります。

完成イメージ画像

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

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

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

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「PHOTEK (tcd024)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

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

先頭へ