文章を、画像の縦方向の位置の中心に置きたい

質問

ＣＳＳを使ってｗｅｂページのレイアウトをしています。
画像の高さの真ん中あたりに、文章を配置したいのですが、方法を教えてください。

「vertical-align：middle;」で指定してみたら１行の文ではうまく行ったのですが、複数行になるとうまくいきません。
どうすれば、複数行の文章で上手く指定できるでしょうか。

[ソース]
<style>
.test{
width:530px;
height:263px;
background-color:#ffcccc;
font-size:10pt;
}

img{
vertical-align:middle;
}

</style>

<div class="test">
<p>
テキスト<br>
テキスト<br>
テキスト<strong>テキスト</strong>テキスト<br>

<img src="画像のURL"width="250" height="259" alt="画像の名前">
</p>
</div>

回答No.1

noname#19175 · ベストアンサー

<img>はインライン要素ですので、テキスト同様、１つの画像で１行と見なされますので、段組表示にする必要があります。

paddingやmarginでも特定の環境であれば表示は出来ますが、
ブラウザの文字サイズを変更すれば中央ではなくなりますし、
たぶんこのレイアウトは、テーブルでなければ出来ないと思いますが、
１つのセルが画像だけの場合は、画像未対応かつテーブル未対応ブラウザでは
ALT=""を指定するとそのセル（テーブル）は消滅しますので、ユーザビリティーは問題ないと思います。
（CSSでできるという方がいらっしゃいましたら、後学のためにも是非教えて頂きたいです）

td {
vertical-align:middle;
}

<table><tbody>
<tr>
<td>画像の名前<br>画像についての解説</td>
<td><img src="image.jpg" alt=""></td>
</tr>
</tbody></table>

ALTを指定したり、
CSS未対応ブラウザ（の、テーブル対応ブラウザ）では、右側に画像を置くのではなく、テキストの下に置きたいという場合は、テーブルは使用できませんので、
中央表示ではなく、上段表示にしなければならないと思います。（vertical-align未指定と同じ位置）

お礼

回答ありがとうございます。

なかなか難しいんですねぇ。

実はＷｅｂ標準の勉強をするためにＣＳＳの勉強をしています。だから、出来ればテーブルを使いたくないと思いまして、この質問をしてみました。

でもとりあえず、No.1さんの案を試してみてからまた考えます。自宅のパソコンにこのhtmlファイルがないので(^_^；)月曜日になってしまいますが…。

あと、何かの偶然でこれをご覧の皆様！
No.1さんも仰っているように、もしＣＳＳで出来るという方がいらっしゃいましたら、お願いします！！

補足

そろそろ質問を締め切りたいと思います。

＞Ｎｏ．１さん

結局、暫定的にテーブルを使用するという形でレイアウトをしました。
ご回答ありがとうございました！