CSS：如何在桌面上放置图像

Question

我有一张数字表，我想附加一张图片 在数据边框边缘的表格顶部。但是我没有 如何做到这一点，有人能指出我正确的方向吗？

以下是我想要实现的目标：

目前我的桌子上没有圆形的“箭头”和“=”图像。

由于

根据以下建议，我已实施此代码：

<td>
<img src="images/up.png" alt="increase" height="20" width="20" style="position: relative; left: 47px;"/>&euro;<?php echo $cSalePrice; ?>
</td>

给出以下结果：

如您所见，箭头图像不以块为中心 “65欧元”的文字已被轻推......

有什么想法吗？

好的，现在尝试评论的建议，它修复了“€65”微调。 但是图像仍然没有垂直居中于框：

Answer 1

例如，一种解决方案是将<img src="...">放在左侧TD中，并为其提供以下样式以将其向右移动其布局位置：

position: relative;
left: 16px;

Answer 2

您的图片应该有绝对位置，顶部和左侧（或右下角）。 ＆lt; TD＆GT;它应该是位置相对的。

所以，比如：

<td style="position:relative;">&euro;65<img src="..." style="position:absolute; left:30px; top: 3px;"> </td>

这样，您可以将图像相对于其所在的位置进行定位。

你应该使用类而不是内联代码

Answer 3

使表格相对。

然后在表格中添加四个图像，这些图像绝对定位并定位到每个角落。例如：

table{position:relative}
table img.topright{position:absolute;top:0;right:0;}
table img.bottomleft{position:absolute;bottom:0;left:0;}

等

Answer 4

这样的事可能有用。创建一个额外的列并使宽度为0.我使用div而不是图像，但它是相同的。你可以尝试here

css

table {
    margin: 10px;
}

table td {
    border: 1px solid black;
    padding: 10px;
    width: 100px;
}

table td.thin {
    position: relative;
    width: 0;
    padding: 0;
    border: none;
    text-align: center;
}

table td.thin div {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    background: red;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
}

和html

<table>
    <tr>
        <td>r1c1</td>
        <td class="thin"><div>×</div></td>
        <td>r1c3</td>
    </tr>
    <tr>
        <td>r2c1</td>
        <td class="thin"><div>×</div></td>
        <td>r2c3</td>
    </tr>
</table>

这应确保垂直和水平居中，不会影响其他细胞。