画像の高さと文字位置

質問

方法として思いつかないため、良いアイディアか方法があればご教授ください。ブラウザや環境により見え方がまちまちなのも承知の上です。
現在以下のような感じに文字と画像を組んでいるのですが、

<table>
<tr><td valign="middle"><img src="**.gif" width="10" height="10"></td>
<td valign="middle">てきすとてきすとてきすとてきすとてきすとてきすと</td>
</tr></table>

てきすとが２行になった時も画像が当然ながら高さの中央に配置されるため不自然になっています。できれば２行目が存在することになっても画像の高さをテキスト１行分の中央におきたいのですが何か方法ありませんでしょうか。
スタイルシート記述でもタグでも構いません。

回答No.1

lesstia · ベストアンサー

箇条書きの行頭マークを画像に変更したいのだと思いました。
<ul>と<li>を使用してCSSで ul li に background-image:を指定するか、
もっと簡単なのは画像の高さをあらかじめ1文字分にしておき、valign=topするのがいいんじゃないでしょうか。

お礼

リストを使うことは忘れてました！　ありがとうございます。
無事に対処できました。

回答No.3

toast5

１の方のおっしゃる通り、たぶん文頭に小さい文頭マークを付けたいのだと思うので、
テーブルじゃなくリストを使うのがいいと思いますが、

＞画像が当然ながら高さの中央に配置されるため不自然に

これについてのみ言えば、valign=「"middle"」を「"top"」に書き換えてみてはどうでしょう。

回答No.2

ORUKA1951

≫ブラウザや環境により見え方がまちまちなのも承知の上
≫以下のような感じに文字と画像を組んでいる
≫スタイルシート記述でもタグでも構いません。

　発想の順番が違います。
　最初に決めなければならないのは、そもそも、これはどんな要素で組み立てられている文書か？。すなわち、文書構造が出発点です。
　その上で、デザインを考えましょう。

　たとえば、カタログで、リストで説明が書かれている。
[例]
<dl>
　　<dt>商品名</dt>
　　<dd>画像</dd>
　　<dd>商品説明</dd>
　　<dt>商品名</dt>
　　<dd>画像</dd>
　　<dd>商品説明</dd>
</dl>
それとも、アルバムを説明つきで表示するのか
[例]
<div>
　　<h3>画像とタイトル</h3>
　　<p>説明</p>
</div>
<div>
　　<h3>画像とタイトル</h3>
　　<p>説明</p>
</div>
あるいは、本当に表なのか
<table>
　　<tbody>
　　　　<tr>
　　　　　　<th>タイトル<th><td>写真</td><td>説明</td>
　　　　</tr>
　　</tbody>
</table>

お礼

本来の状況だったら、仰ることは尤もなんですが素地とタグ使用にかなりの縛りがあっての作成だったのでこんな聞き方しかできませんでした。