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

締切済

質問者：sgmsgm
質問日時：2012/04/25 14:00
回答数：5件

画像の右側にテキストを回り込ませ、
そのテキストを、高さ中央揃えにしたいのですが
テキストに改行がある場合には
どのようにしたら良いでしょうか？

テキストに改行があるために

vertical-align:middle;

を使うとテキストの<br>以下が画像下に回り込んでしまいます。

vertical-align:middle;

を使うと、改行以下も画像の横に表示されますが、
上揃えとなってしまいます。

何かもっと違う方法が良い方法があれば教えてください。
お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： DrFell
回答日時：2012/05/15 07:43

<head>

- 0
- 件

通報する

No.4

回答者： DrFell
回答日時：2012/04/27 20:30

先の回答にも書きましたが、htmlやcssは文章構造が大事です。

どんなに、こうしたいと書かれましても文章構造がなくては、適切なアドバイスができません。

html4以下はインライン要素とブロックレベル要素があり、インライン要素にブロックレベル要素を含めることができません。ので、根本的にsgmsgm さんのブロック要素ごとインライン要素であるa要素に含めるというのは無理があります。

html5からは、ブロック要素、インライン要素の考え方は表示上（ｃｓｓ）は残っていますが、文章構造としては無くなるようです。つまり、それまでのインライン要素にブロックレベル要素を含めても問題がなくなります。ですので、問題がなければ、html5の宣言をするのが簡単ですね。

見た目上で画像だが、構造的には意味が無い場合は、imgではなく、文章への背景として扱えばdreamweaverでのデザインビュー上も許容範囲で表示されると思いますよ。

無理やり１回ですますよりも、２回書くことに何の問題があるのかよくわかりません。事情はわかりませんが、スマートだと思います。

この回答への補足

ありがとうございます。
GWで留守にしていてお礼が遅れました。

利用しているブログサービスによる各パーツの文字数制限によって
文字数削減が目的でした。

文章の構造を補足に足しておくのでよろしければまた
ご教授頂けると幸いです。

補足日時：2012/05/08 10:00

通報する

- 0
- 件

通報する

この回答へのお礼

お礼に補足を入力することになってしまい申し訳ございません。

<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:22

No.3

回答者： DrFell
回答日時：2012/04/25 20:35

文章構造を見せていただかないと、違っているのかもしれませんが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関連の値を使う方法もあります。こちらだとブロック要素にも使えます。

この回答への補足

ありがとうございます。
現状組んである内容に、spanを書き込むだけで一番近い形に表示されました。

ただ、2つほど気になる点が。
Dreamwever CS4だとプレビューをしない限り、実際の表示が見えず
編集画面では崩れて表示されているため全体のバランスが分かりにくいんです。

また、ブラウザとの相性の問題で
IEでは、リンクへの指アイコンが表示されないようでした。
Chromeだとばっちり出ていましたが。

最初の説明が足りませんでしたが、
今回は、左画像と右のテキストとを同じリンク先を設定したいということでした。

これまでセルで分けてそれぞれにリンク先を書いていましたが
リンク先の記述が2回になってしまうためセルを結合しました。

なんだそんなことだったら、こんな記述を使わずに
もっと違うこういうのが便利だよと言うのがありそうですね。

補足日時：2012/04/26 09:56

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/04/25 20:27

vertical-align:middleで回り込むということはおかしいです。

verticla-alignは、tableのcellに対するものですから、それ(ceell)自体が回り込むことはありません。cell以外には、HTMLで言うところの画像の位置と行のベースラインの位置関係を指定するものですから、強制改行すれば別の行ですから、「下の行に行くべきです」

vertical-align ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
と
表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
を読んでおくこと。

「画像横に改行があるテキストを高さ中央で」という考え方は、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. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証すみ。
タブは＿に置換してあります。戻すこと。

<!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>