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 paddingandcell spacing什么都不做？

4

2 回答 2

1

Cellpadding 和 cellspacing 默认为 0。这就是它们“什么都不做”的原因。要垂直对齐，请使用 CSS vertical-align。就像是

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

可能是您正在寻找的东西。

于 2013-01-18T03:33:53.797 回答
0

You just have some typos. Your html is a little messed up. vertical-align is a css property, and therefore should be inside the style="" declaration like below. you're also missing some closing tags.

<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>

here's a fiddle: http://jsfiddle.net/s_Oaten/vmaex/

于 2013-02-22T21:12:13.037 回答