中心链接文本图像

Question

我有一个asp.net页面，我试图将图像放在表格单元格的中心，并让该图像成为另一个页面的链接。我对CSS不太好，但我尝试了几个不同的东西，这里是我的结果截图：

正如您所看到的，链接位于图像旁边...我希望该链接位于该图像的中心，但也可以使图像可以点击（作为链接的一部分），就像这样：

这是我的表（请记住，这是ASPx GridView控件的一部分，因此对于它的数据源中的每一行重复它）：

<table style="text-align: left; border-collapse: collapse; width: 100%">
<tr>
    <td style="width: 5%;"><strong>Request ID</strong></td>
    <td class="field">Date</td>
    <td class="field">Requestor</td>
    <td class="field">Status</td>
</tr>
<tr>
    <td rowspan="4" align="center" style="position:relative;">
        <a href='<%#"pending_requests.aspx?RID=" + Eval("RequestID") %>'><img src="../images/document.png" alt=""  style="z-index: -1"><%# Eval("RequestID") %></a>
    </td>
    <td>
        <dx:ASPxLabel ID="labelRequestDate" runat="server" Text='<%# Eval("RequestDate") %>'></dx:ASPxLabel>
    </td>
    <td>
        <dx:ASPxLabel ID="labelICAO" runat="server" Text='<%# Eval("ICAO") %>'></dx:ASPxLabel>
    </td>
    <td>
        <dx:ASPxLabel ID="labelStatus" runat="server" Text='<%# Eval("Status") %>'></dx:ASPxLabel>
    </td>
</tr>
<tr>
    <td class="field" colspan="4">Summary</td>
</tr>
<tr>
    <td colspan="4" valign="top">
        <dx:ASPxLabel ID="labelSummary" runat="server" Text='<%# Eval("Summary") %>'></dx:ASPxLabel>
    </td>
</tr>
<tr>
    <td colspan="4">
        <strong>Description:</strong>
        <br />
        <%# Eval("Description") %>
        <br />
        <br />
        <strong>Comments</strong>
        <br />
        <%# Eval("Comments") %>
    </td>
</tr>
</table>

类“字段”只是使文本变为粗体，并将宽度设置为10％。

请注意，我需要在IE7及更高版本，Chrome和Firefox中使用它。

感谢任何帮助！

Answer 1

如何使用div标记对a标记使用背景图片？

Demo（您可以移除边框，仅将其用于测试目的）

<a href="#"><div><span>495</span></div></a>

div {
    background-image: url('http://i.stack.imgur.com/aNy9C.jpg');
    height: 90px;
    width: 75px;
    background-repeat: no-repeat;
    border: 1px solid #f00;
    position: relative;
}

div span {
    position: absolute;
    font-family: Arial;
    font-size: 24px;
    top:35%;
    left: 20%;
}

a {
    color: black;
}