Question

如何在表格中对齐图像和文字？以下是我到目前为止所做的截图：https://www.dropbox.com/s/o8jxyt4w3lzddoc/table.png

我希望文字与图片对齐!!

这是我的代码：

    <tr>
 <td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px;     padding-right: 0px;">
 <img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line"     title="Line"></a>
 <span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-    family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span
 </td>
 </tr>

Answer 1

保持你的标记和样式分开：

<强> HTML

<table>
    <tr>
        <td>
            <img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line">
            <span style="">text here</span>
        </td>
    </tr>
</table>

<强> CSS ：

td span { vertical-align:top }

<强> JSFiddle Demo

Answer 2

您可以将style="vertical-align:top"添加到td，如下所示：

<tr>
 <td valign="top" style="vertical-align:top; padding-left: 0px; padding-top: 0px; padding-bottom: 0px;     padding-right: 0px;">
 <img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line"     title="Line"></a>
 <span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-    family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span
 </td>
 </tr>

Answer 3

一般来说，要对齐两个元素，您可以将它们设置为display: inline/inline-block，然后使用vertical-align proprty：

img, span {
    display: inline-block;
    vertical-align: middle;
}

演示：http://jsfiddle.net/6UBQZ/

Answer 4

将图像的垂直对齐用作中间。以下是经过编辑的代码：

<tr>
    <td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
       <img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line" style="vertical-align: middle">
       <span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-    family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span>
    </td>
</tr>

对齐表格中的文本和图像

4 个答案: