画像とテキストのレイアウト

質問

左に画像、その画像の右に複数行のテキストを、画像高さの中央に配置したいと思っています。

<table><tr><td><img></td>
<td style="vertical-align:middle">
文１<br>
文2<br>
文3<br>
</td></tr></table>

をテーブルを用いないでレイアウトしたいということです。

<img src="loc">
文１<br>
文2<br>
文3<br>
では、文１ のみが画像右に表示されます。

<img src="loc" style="float:left">
文１<br>
文2<br>
文3<br>
では、文全体が画像のtop位置から表示されます。

どのようにスタイルシートで指定すればいいのでしょうか？

回答No.6

koutarou504 · ベストアンサー

＞「<img>文」 が「<img>段落」 になっただけで記述内容が大幅に変わる
簡単な事です。段落を<img>の横に置きたいが為に、意図的に「行」を断ち切っているからです。
（行の中にその行の集合という概念のブロックは含めない・・・。）
自分で関連性を切って於いて、行でなくボックスの段落を選択しているのですからあたりまえというか・・・。

やはり「要素」の領域に関して理解するというかせめて意識しないと難しいかと。
（と言いつつ説明も感覚的な物なので難しく、参考ＵＲＬなどからで察して頂けたら幸い・・・。）

＞「<img>文」 にしても「<img>段落」 にしても、
＞<img>の高さを前提として、
＞その高さの中央を要求しているにもかかわらず
意図はそうでしょうが、現実は違います。
vertical-align は「行」の高さを基準としての処理です。
「<img>文」は同じ「行」の中にあるので同じ高さです。これを文の前（<img>の後）で改行してみれば、文に<img>の高さが伝わらないので良く判ると思います。
「<img>段落」はそもそも「段落」が別途の「行」のまとまりです。<img>と「段落」は別の行です。この時点で「段落」は既に<img>の高さを知りません・・・。
そして「段落」で高さ中央と意図しているのは「行」の高さに対してではなく、ボックスに対しての行の配置を中央にしたいと希望しています・・・。
望む物が変わっています・・・。

まぁブラウザがどの様に位置づけを行い、情報の流し込みを行っているかなど、面倒な事を意識しないと判らない事なので・・・。

行というかインライン要素については、高さの異なる画像を並べてみたり、ブラウザ（ウィンド）の幅を変えて改行させてみて検証すると、ソースの記述を変えなくても状況が変わったりしていろいろ領域の考え方がわかるかもしれません・・・。

参考URL：

http://www.doraneko.org/webauth/css1/19961217/Overview.html#formatting-model

お礼

認識不足があるのは否めないです。
考えるきっかけになったかと思います。

ありがとうございました。

回答No.5

koutarou504

#2 の者です。
＊「意味的にテーブルのセルを求めている」
＜画像＞＜文＞と、この時点では単に要素が連続しているというだけですが。

＞画像高さの中央に配置したい
これにより、＜文＞がある高さを意識した領域の中央に位置するという事で、先の「画像，文の単なる連続」ではなくなります。
つまり、＜画像＞＜段落＞の関連と、＜段落＞の高さの中央に＜文＞という事です。
そしてポイント・・・。
＜画像＞＜段落＞の関連とは、横に並んだ高さを同じとする事・・・。これが概念としてテーブルやなぁ～と。
（技術的ではなく、あくまで意味としてですが・・・。）
同じ幅，高さによって、行，列を表しているのが表（テーブル）なので・・・。まぁ中身が行，列として意味あるかが本当は重要だけど、領域の高さを同一の並んだ要素としている時点で・・・。

と、テーブルという事を言っている（私が感じている技術的ポイント）理由は、＜画像＞の高さをどの様に＜段落＞に伝えるか。
＜画像＞の高さを単純に別要素に伝えるには＜画像＞を囲うという手段があるが、＜画像＞＜段落＞と並べる必要から＜画像＞に float などの指定が必要と思われ、記述として囲んでも伝わりません。（ないものとして扱われるというか・・・）
よって、「可変」の「高さ」を＜画像＞から＜段落＞へ伝える手段が見当たりません・・・。
そこで、先に１つ提示した画像の高さは事前に判るだろうとの前提で段落の高さを固定値で指定する・・・。
ただその前提でもやっかいなのが＜文＞のサイズと改行との関わりで、ブラウザを限定するなり文字サイズも指定してしまうなり、何かしら妥協が必要に・・・。

改めてポイント。
高さを同じとする要素の並びを想定しているのが表でしょう。何故？と思うかもしれないけど、＜画像＞があってはじめて＜段落＞の高さが決まる。別物の様で決して独立していない・・・。

念の為の一言。
領域の概念は理解していますでしょうか？
「画像高さの中央に配置したい」という事で「高さ」があっての「中央」となります。
無意識の内に「高さ」を用いて自覚がない事も・・・。

いろいろ申しましたが、テーブルを用いれば良いと思いますが・・・。
何度も繰り返しになりますが、高さが同じという領域の並びという事ですから・・・。
（デザインが表形式という事。決してデザインの位置決めの為だけのテーブルという事ではなく。）

補足

詳細な解説、ありがとうございます。

４の補足でも書きましたが、最終的にはテーブルを利用することになると思います。

技術的と意味的の意味は理解できました。
<img>文 は単純に要素の羅列でしかないが、
<img>[imgの高さを要求する段落]だと、高さが同一なものの要素(セル)の羅列（意味）、それを表現するものがテーブル(技術)である、という風に理解しました。

心情的には、「<img>文」 が「<img>段落」 になっただけで記述内容が大幅に変わるのは抵抗があります。
「<img>文」 にしても「<img>段落」 にしても、
<img>の高さを前提として、その高さの中央を要求しているにもかかわらず、[インライン要素]が[ブロック要素] に変わると、高さの扱いが変わるからです。
vertical-align はインライン要素にしか作用しないのは仕様ですと言われればそれまでですが。

何かご指摘あれば、お願いします。

回答No.4

noname#22222

s_husky です。
<img border="0" src="XXXXXX" align="left" width="www" height="hhh"><!--
--><img border="0" src="Dummy" width="xxx" height="iii"></br><!--
-->Desciption</br>

つまり、右を模擬的に３段にするということです。
最下段は、概念上、３等分するという意味で、実際には必要ありません。
上の段は、単なる説明文を中央に位置させるダミーに過ぎません。
1×1の透明画像でも配置すれば十分です。
高さを＜(左画像高さ　－　説明文高さ)/2)に調節すればOKです。
ただし、文字サイズを固定にしないと計算が狂います。

(3cm-1cm)/2=1cm

どちらかいうと、スクリプトで計算して設定する方が手っ取り早いと思います。

補足

補足していただきありがとうございます。

文の上に空白を作るにはやはり、margin で位置を決めるか、
ダミー画像を配置して位置決めするかという方法なんですね。
文章の表示位置を固定したくなければ、スクリプトで計算しろと。

最終的には、テーブルを用いると思います。

回答No.3

noname#22222

+---------+----------+
|==========|..................|
|==========|..................|
|==========|..................|
|==========+----------+
|==========|..................|
|==========|..................|
|==========|..................|
|==========+----------+
|==========|..................|
|==========|..................|
|==========|..................|
|----------+----------+

このようにレイアウトしたらいかがですか？
右も１段では、ちと厳しいかと！

補足

回答有難うございます。
ちょっと、図がどうなっているのか分からないので、HTML で補足していただけると助かります。

回答No.2

koutarou504

技術的にテーブルを使わないと言いつつ、意味的にテーブルのセルを求めている処に無理があると思うのですが・・・。

まず IMG の高さが判らなければ、画像高さの中央に配置など、どこか判りません・・・。
テーブルのセルだと、これは IMG の部分が描画されればなんとか判り、セルの高さとなり他のセルにも影響します・・・。
でもテーブルでないという事は、高さの概念が？？？。

なんか、意味的にテーブルの様な気が・・・。
尚、画像の幅，高さは事前に判ると思うので、ある程度は明示する事で対処可能かも・・・。

補足

遅くなりましたが。。。
回答有難うございます

> 技術的にテーブルを使わないと言いつつ、意味的にテーブルのセルを求めている処に無理があると思うのですが・・・。

の意味が理解できなかったので、変な補足になるかもしれませんが。
もともとは、

<img style="vertical-align:middle">文

があり、文に段落をつけたいというところから
始まっています。(テーブルでレイアウトしていたものをテーブルなしでというわけではありません。)
img の vertical-alignというスタイルで出来るだろうと考えたわけですが、このスタイルは[インライン要素]<br>には有効だけど、
ブッロク要素に対しては無効 （

<img style="vertical-align:middle;
float:left"><div>文１<br>文2<br>文3<br></div>

）になるということを実際にやってみて確認したわけです。
色々いじっても上手くいかなかったので、何かパターンがあるのかなと思い質問しました。
文の高さを固定値にしたくないと書いたのは、
以下のように動的にこのレイアウトを任意のレイヤーに作成すると・・・という考えが、ふと頭によぎったからで、本質ではないかもしれません(屁理屈ですね)。

多分、出来ないと思いますが、もう少し待ちます。

function f(targetLayerID, imgUrl, text){ // text = "文１。文２。文３。"
var doc = window.document;
var layer = doc.getElementById(targetLayerID);
var img_ = doc.createElement("img");
var br_ ;
var txt_;
var ary = new Array();

img_.src = imgUrl;
img_.style.verticalAlign = "middle";

ary = text.split("。");
layer.appendChild(img_);

for (var index = 0 ; index < ary.length - 1; index++){
ary[index] += "。";
txt_ = doc.createTextNode(ary[index]);
br_= doc.createElement("br");

layer.appendChild(txt_);
layer.appendChild(br_);
}
}

回答No.1

cyokokichi

<img src="loc" style="float:left">
<p style="margin-top:**px">
文１<br>
文2<br>
文3<br>
<p>

文の長さやページの幅の決め方でやり方も変わると思いますが、上のように書いて**で調整されてみてはいかがでしょうか。

補足

ありがとうございます。

出来れば、固定した値を使わないで済む方法がないかと思っています。

提示いただいた方法で、 margin-top:50% のように出来ればと思ったのですが、
これだと画像のはるか下にテキストが表示されます。
margin-topのところを position:relative; top:50% とやってみましたが、駄目でした。

何かあれば、お願いします。