同一セルでの垂直方向の位置揃えについて

質問

同一セルでの垂直方向の位置揃えについて
よろしくお願いいたします。

tableタグを使用して表を作成しております。

最後の列のセルだけテキストとimgを配置したいのですが、
その際、テキストは必ずセル内中央に、imgは必ずセル内下部に配置するような
事は可能でしょうか？

行によって高さが変わるのでmargin,padding等ではセル内の特定の位置に表示できず、
vertical-alignをセルに適用すればどちらかは出来るのですが、

同一セル内で

vertical-align:middle;
vertical-align:botom;

のような事が同時に実現出来る指定などあるでしょうか？

下記のような感じなんですが、

<table>

<tr>

　<td>このセルは高さが100px</td>

　<td>テキストは中央にimgは下部に配置したいセル
　　　<a href="a.html"><img src="a.jpg" height="10" /></a>
　</td>

</tr>

<tr>

　<td>このセルは高さが200px</td>

　<td>テキストは中央にimgは下部に配置したいセル
　　　<a href="b.html"><img src="a.jpg" height="10" /></a>
　</td>

</tr>

</table>

どうぞよろしくお願い致します。

回答No.2

noname#108428 · ベストアンサー

> relative;とabsoluteを使用するということでしょうか？？

私は、それを想定しています。
それを使用しない方法をご存知でしたら、
逆に教えてください。

> そのボックスにjs等で高さを割り出して（jsはちょっと理解しておりません、、、）

width、heightの値は、共に「100%」で構いません。

> そこを親としてimgをbottomで配置するような感じになるのでしょうか？

bottomで配置するというか、

親との相対的な位置を
bottom: XXXpx;
で指定する、ってことです。

お礼

ありがとうございます！
できました！

実は当初教えて頂いた方法は試していたのですが、
tdはなりゆきで高さ（見た目だけ？）が変わるので、
tdにheightを指定しておらず、ボックスの
height:100%;が作用せず、td内では高さ算出が
出来ないものだと思っておりました。

tdにheight:1px;を指定したらご解答頂いた方法で出来ました。

js,position以前のところがわかっていなかったようです。

解決致しました。

ありがとうございます！！

回答No.1

noname#108428

position、を指定してください。

お礼

＞U-ta_mさん

＞position、を指定してください。

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

positionを使用するということは、

relative;とabsoluteを使用するということでしょうか？？

tdにはposition指定が出来ないので、そうしますと該当セルの中にボックスをつくり、
そのボックスにjs等で高さを割り出して（jsはちょっと理解しておりません、、、）
そこを親としてimgをbottomで配置するような感じに
なるのでしょうか？

それとももっと簡単な方法になりますか？