Question

我有以下html（在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>

我的问题是我需要锚点的文字正好位于图片上方和中间位置。

因为锚点的文本不是固定长度，当图像宽度为96px时，如何实现此目的？

如何获得锚文本的宽度（以像素为单位）？如果我知道它，我可以使用jQuery定位它（设置'left'属性，因为我使用'position：relative'）。

编辑 - 我的css代码：

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

非常感谢：）

Answer 1

这有效：

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

Answer 2

哇那里，没有必要如此迅速地使用javascript。如果您的图像是固定长度，为什么不将锚文本设置为固定长度？无论如何你都是文本的中心，它不会影响它的定位方式，并且如果文本太长而无法放在一行上，它将解决你可能遇到的任何问题，因为它只会将额外的内容包装到下一行。

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

Answer 3

问题是，你有太多不必要的花车。我会将CSS更改为以下内容：

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

基本上，保持＆lt; IE8兼容，'浮动'团队成员应该有一个宽度设置。

在float:left;上设置.teamMemberLink因为浮动而打破了对齐。我还从CSS中删除了很多不受欢迎的floats。

JS小提琴：

http://jsfiddle.net/NuSHQ/

Answer 4

将css中的team_member课程设为text-align:center。

尝试设置为“teamMemberLink”类宽度：96px;

这对我有用： http://jsfiddle.net/has5V/1/

或者你需要链接超过96px吗？

好的，你真的需要成为浮动的元素吗？在这里查看带有br标签的另一个解决方案 http://jsfiddle.net/has5V/2/

如何定位html <a> tag above an image and in the middle?</a>

4 个答案: