HTMLについて質問が御座います。直接HTML内のtableに画像とテキストを配置した場合に、画像も文字も上下センター合わせにしたいのですが上手くいきません…。例えば以下ですと… ここにはテキストとある場合に、それぞれをセンターで合わせる方法は可能でしょうか？文字だけの場合、vertical-alignで出来るのですが文字が一緒にいると上手くいきません。今回は背景での指定は行いたくないです。お分かりになる方いらっしゃいましたらアドバイスよろしくお願いいたします。

でページ全体がセンター配置になります。でテーブルの中だけがセンター配置になります。で内がセンター配置になります。で内がセンター配置になります。でこの画像だけがセンター配置になります。

table内で画像と文字をセンター合わせするには？

解決済

質問者：yuyukina
質問日時：2015/03/13 15:54
回答数：3件

HTMLについて質問が御座います。

直接HTML内のtableに画像とテキストを配置した場合に、画像も文字も上下センター合わせにしたいのですが上手くいきません…。

例えば以下ですと…

<table>
<tr>
<td>
<img src="hoge"> ここにはテキスト
</td>
</tr>
</table>

とある場合に、それぞれをセンターで合わせる方法は可能でしょうか？

文字だけの場合、vertical-alignで出来るのですが文字が一緒にいると上手くいきません。
今回は背景での指定は行いたくないです。

お分かりになる方いらっしゃいましたらアドバイスよろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2015/03/13 17:47

td{vartical-align:middle;}

td img{display: inline-block;vertical-align: middle;}

- 4
- 件

通報する

この回答へのお礼

端的なご回答ありがとうございます。
パーフェクトな回答感謝申し上げます。

td自体とtd内のimgへの指定でできるのですね、大変勉強になりました。
ありがとうございます。

通報する

お礼日時：2015/03/13 21:29

No.3

回答者： ORUKA1951
回答日時：2015/03/13 18:29

デザインのためにtableを使うのは誤りですけど・・・

それは置いておいて・・・
<table summary="テスト">
　<tbody>
　　<tr>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　</tr>
　　<tr>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　</tr>
　</tbody>
</table>
table[summary="テスト"] tbody tr td{height:300px;white-space:nowrap;}/* 行の折り返しを防ぐ*/
table[summary="テスト"] tbody tr td{vertical-align:top;}/* テキストの位置*/
table[summary="テスト"] tbody tr td+td img{vertical-align:middle;}/* 画像の位置 */
table[summary="テスト"] tbody tr+tr td{vertical-align:middle;}/* テキストの位置*/
table[summary="テスト"] tbody tr+tr td+td img{vertical-align:middle;}/* 画像の位置 */

とりうる値
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

本当に表ですか・・・

- 0
- 件

通報する

No.2

回答者： nitto3
回答日時：2015/03/13 18:29

<body Valign=center align=center>

でページ全体がセンター配置になります。
<table Valign=center align=center>
でテーブルの中だけがセンター配置になります。
<tr Valign=center align=center>
で<tr>内がセンター配置になります。
<td Valign=center align=center>
で<td>内がセンター配置になります。
<img src="hoge" Valign=center align=center>
でこの画像だけがセンター配置になります。