Question

我有以下html结构，我在html表中显示一些细节。

<table cellspacing="15">
    <tr>
        <td>
            <img src="Images/user1.png" />
            <label>
                User</label>
        </td>
        <td>
            John
        </td>
    </tr>
    <tr>
        <td>
            <img src="Images/version1.png" />
            <label>
                Old ID</label>
        </td>
        <td>
            345345
        </td>
    </tr>
    <tr>
        <td>
            <img src="Images/version3.png" />
            <label>
                New ID</label>
        </td>
        <td>
            367976
        </td>
    </tr>
</table>

Sample ScreenShot

我想在图像上添加margin-top，以便图像向下移动约3或4像素，但CSS没有任何效果。请帮忙。

我还发现cellspacing不是HTML5中的有效属性。任何替代财产都能达到同样的效果。？

Answer 1

它为我工作..无论如何你可以尝试这样 LINK ，如果你想将img和文本放在同一行

<强> CSS：

td,td img {
    line-height:28px;
    vertical-align:middle;
}

Answer 2

为图片添加负底边距 （我通常尽量避免使用负边距，但在这种情况下，它是一个快速修复，不会影响旁边的文本）：

td img {
    margin-bottom:-4px;
}

Answer 3

cellspacing的替代方案是

table {
    border-collapse: separate;
    border-spacing: 15px;
}

对齐图片

您可以使用vertical-align:middle。

See DEMO here.

Answer 4

保证金顶部应该可以正常工作，但它也可能会在标签上移动。

可能的解决方案是使用定位，所以：

img {position: relative; top: 4px;}

Answer 5

你可以这样做。
只需删除<lable>代码＆amp;在valign="top"

中添加<td>

<table cellspacing="15">
    <tr>
        <td valign="top">
            <img src="Images/user1.png" />

                User
        </td>
        <td>
            John
        </td>
    </tr>
    <tr>
        <td valign="top">
            <img src="Images/version1.png" />

                Old ID
        </td>
        <td>
            345345
        </td>
    </tr>
    <tr>
        <td valign="top">
            <img src="Images/version3.png" />

                New ID
        </td>
        <td>
            367976
        </td>
    </tr>
</table>

在html表格中添加margin-top到图像

5 个答案: