CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 1726

Center link text over image

I have an asp.net page that I'm trying to have an image be in the center of a table cell and have that image be a link to another page. I'm not too good with CSS but I tried a couple of different things and here's a screenshot of my outcome: enter image description here

As you can see, the link is beside the image...I'd like to have that link be in the center of that image, but also have the image be clickable (as part of the link), like so: enter image description here

Here's my table (keep in mind that this is part of a ASPx GridView control so it gets repeated for each row in it's datasource):

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

The class "field" simply makes the text bold and sets the width to 10%.

Please keep in mind that I need this to work in IE7 and above, Chrome, and Firefox as well.

Any help is appreciated!

Upvotes: 0

Views: 556

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

How about using a background image for a div tag which is wrapped around using an a tag?

Demo (You can remove border, just used it for test purpose)

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

div {
    background-image: url('https://i.sstatic.net/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;
}

Upvotes: 2

Related Questions