如何將html <a>標籤定位在圖像上方和中間？

我有以下的HTML（ASP.NET直放站內）：如何將html <a>標籤定位在圖像上方和中間？

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

感謝很多:)

來源

2011-06-07 Sash

您可以設置teamMemberLink類是一定的寬度和使用保證金：在CSS 0汽車。如果文字太長，但會以2或3行打破。 – 2011-06-07 17:04:10

問題是，你有太多不必要的花車。我將在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; }

基本上保持< IE8兼容的「浮動」的團隊成員確實應該有一個寬度集。

設置float:left;.teamMemberLink正在破壞由於浮動而導致的對齊。我也從CSS中刪除了很多未完成的floats。

JS小提琴這裏：

http://jsfiddle.net/NuSHQ/

來源

2011-06-07 18:11:16 Mig

非常感謝！它的作品，我理解了一些事情！ – Sash 2011-06-07 18:51:54

簡單jsfiddle：http://jsfiddle.net/NuSHQ/2/ – 2016-04-20 00:28:05

這工作：

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

來源

2011-06-07 17:08:12 FishBasketGordo

對我不起作用... – Sash 2011-06-07 17:24:12

這是正確的方法。如果它不適合你，那麼開始展開你所有的漂浮物和相對位置，這可能是不必要的。 – dkamins 2011-06-07 17:53:50

但鏈接可能超過96px - 這是問題...鏈接的文本取決於數據庫中的值... – Sash 2011-06-07 18:00:32

設置team_member類在CSS中text-align:center。

嘗試設置爲「teamMemberLink」類寬度：96px;

工作對我來說在這裏： http://jsfiddle.net/has5V/1/

還是你必須鏈接長於96PX？

好的，你真的需要成爲元素浮動嗎？在這裏尋找另一個解決方案與br標籤 http://jsfiddle.net/has5V/2/

來源

2011-06-07 17:11:00 Matop79

鏈接可能長於96px - 這是問題...鏈接的文本取決於數據庫中的值... – Sash 2011-06-07 17:51:24

你不是說這個鏈接應該長於96px嗎？有人能解釋我爲什麼勝利的答案比我的答案更好嗎？ – Matop79 2011-06-07 19:57:36

哇，那裏，沒有必要跳到使用javascript這麼快。如果圖片的長度是固定的，爲什麼不將錨文本設置爲固定長度？如果您將文本居中放置，它將不會影響其定位方式，並且它將解決您可能遇到的任何問題，如果文本太長而無法放在一行上，因爲它會將附加內容包裝到下一行。

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

來源

2011-06-07 18:00:07 Wex

如何將html <a>標籤定位在圖像上方和中間？

回答

相關問題