【OCN】1GBプレゼントCP中!

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

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

例えば以下ですと…

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

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

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

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

gooドクター

A 回答 (3件)

td{vartical-align:middle;}


td img{display: inline-block;vertical-align: middle;}
    • good
    • 4
この回答へのお礼

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

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

お礼日時:2015/03/13 21: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

本当に表ですか・・・
    • good
    • 0

<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>
でこの画像だけがセンター配置になります。
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング