Question

我几乎是一个完全的初学者，请记住这一点

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

由于某种原因，右栏上的文字被左侧的图像按下。我发现我可以通过在图像之前添加＆amp; nbsp来纠正这个问题，但图像会被压缩并看起来很难看。

问题： 如何垂直对齐图像和文本？

为什么cell padding和cell spacing什么都不做？

Answer 1

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

这样的东西

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

可能是您正在寻找的。

Answer 2

你只是有一些错别字。你的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/

HTML：右侧图像，左侧文本和文本因某种原因被推下来的表格

2 个答案: