Текст ссылки центра над изображением

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> 

Класс "fie ld "просто делает текст полужирным и устанавливает ширину в 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; 
}