圖片上的中心鏈接文字

我有一個asp.net頁面，我試圖讓圖片位於表格單元格的中心，並讓該圖片成爲另一個頁面的鏈接。我不是CSS不太好，但我試過幾個不同的東西，這裏是我的結果的截圖： enter image description here 圖片上的中心鏈接文字

正如你看到的，鏈接的圖片旁邊......我想有該鏈接是在圖像的中心，但也有像可點擊（作爲鏈接的一部分），像這樣： enter image description here

這裏是我的表（請記住，這是一個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。

任何幫助表示讚賞！

來源

2013-05-16 Robert

請後呈現的HTML，不是ASP，包括CSS。 – j08691

或把它放在小提琴 – ediblecode

對不起，我並沒有這樣做，但ASPX呈現爲HTML是巨大的，因爲我使用內置控件（GridView），它會創建各種樣式和這樣的這使得它幾乎不可能弄清楚。 – Robert

對於使用a標籤纏繞的div標籤，如何使用背景圖片？

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; 
}

來源

2013-05-16 17:05:49

感謝艾倫先生......這一切都很好，只需稍作調整（現有的一些CSS也搞亂了）。 – Robert

@Robert你歡迎:) –

圖片上的中心鏈接文字

回答

相關問題