How to position html <a> tag above an image and in the middle?

I have the following html (inside ASP.NET Repeater):

<div class="team_member">
    <a class="teamMemberLink" href='<%# "Profile.aspx?uID=" + Eval("ID") %>' target="_blank"><%# Eval("Name")%></a> 
    <asp:Image ID="teamMemberProfileImage" CssClass="teamMemberImg" runat="server" ImageUrl='<%# "ImageHandler.ashx?id=" + Eval("ID") %>' />                                      
    <input id="rateTeamMember" class="teamMemberRating" type="button" value="" runat="server" />
    <input id="teamMemberID" type="hidden" value='<%# Eval("ID") %>' />
</div>

My problem is that I need the anchor's text to be exactl开发者_Python百科y above the picture and at the middle.

Because the anchor's text is not a fixed length, how can I accomplish this when my image width is 96px?

How can I get the width in pixels of the anchor's text? If I would know it, I could position it using jQuery (setting the 'left' property, because i'm using 'position:relative').

EDIT - my css code:

.team_member { float: left; margin-left: 10%; margin-top: 10%; text-align:center; }
.teamMemberLink { float: left; clear: left; position: relative; top: -20px; }
.teamMemberImg { width: 96px; height: 96px; float: left; border: 1px solid #d1c7ac; }
.teamMemberRating { float: left; }

Thanks a lot :)

The problem is, you have far too many unessential floats. I would change the CSS to the following:

.team_member { 
    float: left; 
    margin-left: 10%; 
    margin-top: 10%; 
    text-align:center; 
    width:96px; 
 }
.teamMemberLink { display:block; }
.teamMemberImg { 
    display:block; 
    width: 96px; 
    height: 96px; 
    border: 1px solid #d1c7ac; 
}
.teamMemberRating { display:block; }

Basically, to remain < IE8 compatible, the 'floating' team-member should really have a width set.

Setting float:left; on .teamMemberLink was breaking the alignment due to the float. I also removed a lot of uneeded floats from the CSS.

JS Fiddle here:

http://jsfiddle.net/NuSHQ/

This works:

<div style="width: 96px; text-align: center;">
    <a href="#">stackoverflow</a><br />
    <img src="#" />
</div>

Whoa there, no need to jump into using javascript so quickly. If your image is a fixed length, why not set your anchor text to be a fixed length as well? If you're centering the text anyway, it won't effect how it is positioned, and it will solve any problem that you might have if the text is too long to fit on one line, since it will just wrap the extra to the next line.

a { 
    text-align: center;
    width: 96px;
    display: block;
}

Set team_member class in css to text-align:center.

Try set to "teamMemberLink" class width: 96px;

it works for me here: http://jsfiddle.net/has5V/1/

Or do you need to be link longer than 96px?

Ok, and do you really need to be elements floated? Look here for another solution with br tags http://jsfiddle.net/has5V/2/