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