Question

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

Answer 1

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/