CSS：如何将图像放在桌子上答案

【问题标题】：CSS: How to lay an image on top of a tableCSS：如何将图像放在桌子上
【发布时间】：2012-02-25 15:22:44
【问题描述】：

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

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

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

谢谢

根据以下建议，我已经实现了这段代码：

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

给出以下结果：

如您所见，箭头图像未以块为中心，并且文本“65 欧元”也被轻推...

有什么想法吗？

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

【问题讨论】：

标签： css image css-float

【解决方案1】：

您的图像应该有一个绝对位置，顶部和左侧（或右下角）。它所在的

应该是相对位置。

所以，类似：

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

这样，您可以相对于它所在的 td 定位图像。

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

【讨论】：

【解决方案2】：

使表格相对。

然后在 te 表中添加四个图像，这些图像绝对定位并定位到它们各自的角。例如：

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

等

【讨论】：

【解决方案3】：

这样的事情可能会奏效。创建一个额外的列并将宽度设为 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>

这应该确保垂直和水平居中并且不会影响其他单元格。

【讨论】：

【解决方案4】：

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

position: relative;
left: 16px;

【讨论】：

我宁愿设置位置：相对；到和 position: absolute;到图像。记得同时设置 top 和 left 否则 IE 会失败。