title: How to position html <a> tag above an image and in the middle?
body: <p>I have the following html (inside ASP.NET Repeater):</p>
  
  <pre><code>&lt;div class="team_member"&gt;
      &lt;a class="teamMemberLink" href='&lt;%# "Profile.aspx?uID=" + Eval("ID") %&gt;' target="_blank"&gt;&lt;%# Eval("Name")%&gt;&lt;/a&gt; 
      &lt;asp:Image ID="teamMemberProfileImage" CssClass="teamMemberImg" runat="server" ImageUrl='&lt;%# "ImageHandler.ashx?id=" + Eval("ID") %&gt;' /&gt;                                      
      &lt;input id="rateTeamMember" class="teamMemberRating" type="button" value="" runat="server" /&gt;
      &lt;input id="teamMemberID" type="hidden" value='&lt;%# Eval("ID") %&gt;' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem is that I need the anchor's text to be exactly above the picture and at the middle. </p>
  
  <p>Because the anchor's text is not a fixed length, how can I accomplish this when my image width is 96px?</p>
  
  <p>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').</p>
  
  <p>EDIT - my css code:</p>
  
  <pre><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; }
  </code></pre>
  
  <p>Thanks a lot :)</p>