締切済み

CSS 画像横に改行があるテキストを高さ中央で

2012/04/25 14:00

画像の右側にテキストを回り込ませ、そのテキストを、高さ中央揃えにしたいのですがテキストに改行がある場合にはどのようにしたら良いでしょうか？テキストに改行があるために vertical-align:middle; を使うとテキストの<br>以下が画像下に回り込んでしまいます。 vertical-align:middle; を使うと、改行以下も画像の横に表示されますが、上揃えとなってしまいます。何かもっと違う方法が良い方法があれば教えてください。お願いします。

sgmsgm
お礼率69% (32/46)

CSS
回答数5
ありがとう数3

みんなの回答 （5）
専門家の回答

みんなの回答

DrFell
ベストアンサー率55% (305/551)

2012/05/15 07:43 回答No.5

<head> <style type="text/css"> td a{width:500px;/*画像と文字をあわせた幅*/ height:100px;/*画像の高さ*/ padding-left:120px;/*画像の幅+画像と文字とのあき*/ display:table-cell; vertical-align:middle;} p a{width:500px;/*以下tdと同じ*/ height:100px; padding-left:120px; display:table-cell; vertical-align:middle;} #abc{background:url(abc.jpg) no-repeat;}/*画像を背景として個別に入れます。*/ #def{background:url(def.jpg) no-repeat;}/*場合によってはclassの方がいいかも*/ #ghi{background:url(ghi.jpg) no-repeat;} </style> </head> <body> <table> <tr> <td> <a href="abc.html" id="abc">AAA<br>BBB</a></td> <td> <a href="abc.html" id="def">DDD<br>EEE</a></td> </tr> <tr> <td> <a href="abc.html" id="ghi">GGG<br>HHH<br>III</a></td> </tr> </table> <p><a href="abc.html" id="abc">AAA<br> BBB</a><a href="abc.html" id="abc">DDD<br> EEE</a></p> <p><a href="abc.html" id="abc">GGG<br> HHH<br> III</a></p> 文字数の制限なら、文章構造無視も仕方ないですね。伝えることが大事なので、理想を言ってられません。上記のソースはtableバージョンとpバージョンです。横に並べるため、表でもないのに表にしなくてもいいのです。ｃｓｓの理想から言えば今回の画像と文字の関係は、画像は絶対に必要なものではなく、デザイン表現に必要なものへの適用です。もし、論文中のグラフや概略図などデザインではなく、画像が絶対に必要なコンテンツの場合には使いません。ｈｔｍｌとｃｓｓは表示されたらいいというものではなく、表示されたら……という感覚で勉強されると、無駄な勉強時間を10倍・100倍取られます。今回のとりあえずができれば、わかっているつもりでも、基本から（いわゆる「正しいhtml」系）学び直されることをお勧めします。

DrFell
ベストアンサー率55% (305/551)

2012/04/27 20:30 回答No.4

先の回答にも書きましたが、htmlやcssは文章構造が大事です。どんなに、こうしたいと書かれましても文章構造がなくては、適切なアドバイスができません。 html4以下はインライン要素とブロックレベル要素があり、インライン要素にブロックレベル要素を含めることができません。ので、根本的にsgmsgm さんのブロック要素ごとインライン要素であるa要素に含めるというのは無理があります。 html5からは、ブロック要素、インライン要素の考え方は表示上（ｃｓｓ）は残っていますが、文章構造としては無くなるようです。つまり、それまでのインライン要素にブロックレベル要素を含めても問題がなくなります。ですので、問題がなければ、html5の宣言をするのが簡単ですね。見た目上で画像だが、構造的には意味が無い場合は、imgではなく、文章への背景として扱えばdreamweaverでのデザインビュー上も許容範囲で表示されると思いますよ。無理やり１回ですますよりも、２回書くことに何の問題があるのかよくわかりません。事情はわかりませんが、スマートだと思います。

質問者

お礼 2012/05/08 10:22

お礼に補足を入力することになってしまい申し訳ございません。 <table> <tr> <td><a href="http://www.******.com/abc.html"> <img src="http://www.******.com/abc.gif"></a></td> <td><a href="http://www.******.com/abc.html">AAA</a></td> </tr> </table> としておくのがスマートだと思いますが、リンク先URLを絶対パスで書かなくてはならずURLが実際はもっと長くこうしたリンクが30個ほどあるため、文字数が足りずリンク先を一度で書き出したら節約できるかと思ったのです。 <table> <tr> <td><a href="http://www.******.com/abc.html"> <img src="http://www.******.com/abc.gif align="left"> AAA<br>BBB</a></td> </tr> </table> cssは別ファイルに書くことができ文字制限にも余裕があるため、外部CSSでうまくできないかなと思った次第です。よろしくお願いいたします。

質問者

補足 2012/05/08 10:00

ありがとうございます。 GWで留守にしていてお礼が遅れました。利用しているブログサービスによる各パーツの文字数制限によって文字数削減が目的でした。文章の構造を補足に足しておくのでよろしければまたご教授頂けると幸いです。

DrFell
ベストアンサー率55% (305/551)

2012/04/25 20:35 回答No.3

文章構造を見せていただかないと、違っているのかもしれませんがvertical-alignでも出来ると思います。 vertical-alignはインライン要素とテーブルにのみ有効です。【例】 <img src="test.jpg" width="100" height="100" style="vertical-align:middle;"><span style="display:inline-block;vertical-align:middle">aaa<br>bbb<br>ccc<br>ddd</span> 他には、display:table関連の値を使う方法もあります。こちらだとブロック要素にも使えます。

質問者

補足 2012/04/26 09:56

ありがとうございます。現状組んである内容に、spanを書き込むだけで一番近い形に表示されました。ただ、2つほど気になる点が。 Dreamwever CS4だとプレビューをしない限り、実際の表示が見えず編集画面では崩れて表示されているため全体のバランスが分かりにくいんです。また、ブラウザとの相性の問題で IEでは、リンクへの指アイコンが表示されないようでした。 Chromeだとばっちり出ていましたが。最初の説明が足りませんでしたが、今回は、左画像と右のテキストとを同じリンク先を設定したいということでした。これまでセルで分けてそれぞれにリンク先を書いていましたがリンク先の記述が2回になってしまうためセルを結合しました。なんだそんなことだったら、こんな記述を使わずにもっと違うこういうのが便利だよと言うのがありそうですね。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/04/25 20:27 回答No.2

vertical-align:middleで回り込むということはおかしいです。 verticla-alignは、tableのcellに対するものですから、それ(ceell)自体が回り込むことはありません。cell以外には、HTMLで言うところの画像の位置と行のベースラインの位置関係を指定するものですから、強制改行すれば別の行ですから、「下の行に行くべきです」 vertical-align ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align ) と表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#height-layout ) を読んでおくこと。「画像横に改行があるテキストを高さ中央で」という考え方は、HTMLやCSSの考え方で言うと、とてもおかしいです。　たとえば、画像とその説明を記述したリストがあります。画像の横に説明部分を表示し、説明文は画像の高さの中央に配置したい・・・という風に考えると良いです。 (例)たとえば、次のようなHTMLがあるとします。 <div class="albumList"> 　　<ul> 　　　　<li><img src="./images/01.jpg" width="240" height="180" alt="出発"> 　　　　　　<ul> 　　　　　　　　<li>今日は・・・・家族みんなでドライブに行くことに・・</li> 　　　　　　　　<li>いつもながら、妻の顔作りで予定時間を過ぎてしまった。</li> 　　　　　　</ul> 　　　　</li> 　　　　<li><img src="./images/01.jpg" width="240" height="180" alt="交差点"> 　　　　　　<ul> 　　　　　　　　<li>最初の交差点で事故を目撃してしまった。出かけるのに気が進まない。</li> 　　　　　　</ul> 　　　　</li> 　　</ul> </div> 　大事なことは、どのように表示させたいというプレゼンテーションを考えずに、HTMLは文書構造がわかるように書くことです。これが何よりも大事です。それによって、スタイルシートで好きなようにデザインが変えられるようになる。　そもそもHTMLもスタイルシートも、とっても簡単になります。数年先に見ても理解できる。HTMLを開かなくてもスタイルシートの変更も自由自在に・・ [HTML] ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証すみ。タブは＿に置換してあります。戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="albumList"> ＿＿<ul> ＿＿＿<li><img src="./images/01.jpg" width="240" height="180" alt="出発"> ＿＿＿＿<ul> ＿＿＿＿＿<li>今日は・・・・家族みんなでドライブに行くことに・・</li> ＿＿＿＿＿<li>いつもながら、妻の顔作りで予定時間を過ぎてしまった。</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li><img src="./images/01.jpg" width="240" height="180" alt="交差点"> ＿＿＿＿<ul> ＿＿＿＿＿<li>最初の交差点で事故を目撃してしまった。出かけるのに気が進まない。</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿</ul> ＿</div> </body> </html>

質問者

お礼 2012/04/26 09:25

ありがとうございます。

yambejp
ベストアンサー率51% (3827/7415)

2012/04/25 16:52 回答No.1

端的にいえばテーブル以外で垂直的なセンタリングは簡単にはできない

質問者

お礼 2012/04/26 09:24

ありがとうございます。

CSS 画像横に改行があるテキストを高さ中央で