0

ほぼ完全な初心者です、ご了承ください。

<table style="border:none" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border:none" valign="top" vertical-align:"top"; width="20%">
        <div><img class="alignnone size-medium wp-image-232" src="" style="border: 1px solid #000000; alt="" width="294" height="300"></div>
        <div class="caption" style="font:8pt/12pt verdana" align="center">text</div>
      </td>
      <td style="border:none" valign="top" vertical-align:middle;>
        <div style="font:10pt/14pt verdana" align="justify" valign="top">text text text</div>
      </td>
  </tbody>
</table>

何らかの理由で、右側の列のテキストが左側の画像によって押し下げられています。画像の前に   を追加することでこれを修正できることがわかりましたが、画像が押し下げられて見苦しくなります。

質問: 画像とテキストを垂直方向に揃えるにはどうすればよいですか?

cell paddingとcell spacingが何もしないのはなぜですか?

4

2 に答える 2

1

Cellpadding と cellspacing はデフォルトで 0 です。これが「何もしない」理由です。縦方向に揃えるには、CSS を使用しvertical-alignます。何かのようなもの

<td style="vertical-align:top;">

あなたが探しているものかもしれません。

于 2013-01-18T03:33:53.797 に答える
0

タイプミスがあるだけです。あなたのhtmlは少しめちゃくちゃです。vertical-align は css プロパティであるため、以下のように style="" 宣言内にある必要があります。また、いくつかの終了タグがありません。

<table style="border:none;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border:none; vertical-align:"top";" valign="top" width="20%">
          <div><img class="alignnone size-medium wp-image-232" src="" style="border: 1px solid #000000; display: block;" alt="" width="294" height="300" /></div>
        <div class="caption" style="font:8pt/12pt verdana" align="center">text</div>
      </td>
      <td style="border:none; vertical-align:middle;" valign="top">
        <div style="font:10pt/14pt verdana;" align="justify" valign="top">text text text</div>
      </td>
    </tr>
  </tbody>
</table>

ここにフィドルがあります：http://jsfiddle.net/s_Oaten/vmaex/

于 2013-02-22T21:12:13.037 に答える