asp.net-mvc-3 - mvc3画像の下部に数字を入れるにはどうすればよいですか

Question

画像の左下隅にユーザー ID 番号を配置する方法を見つけようとしていますが、これを行う方法はありますか? これを説明するために、これまでに私が持っているものです

foreach (var item in Model.profile)
{ 
 // user picture
 <img src="@Url.Content("~/uploads/profilepic" + item.photo)"   alt="" />
  // user id number
   @Html.ActionLink(@item.userID, "user", "profile",new { id = item.ProfileID })
    }

上記のコードを使用すると、ユーザー ID 番号が画像の横に表示されますが、画像の左下または右隅に表示しようとしています。ありがとう

Answer 1

これは css を使用して解決できます。最初にアクションリンクを div で囲みます。

foreach (var item in Model.profile)
{ 
  // user picture
  <img src="@Url.Content("~/uploads/profilepic" + item.photo)"   alt="" />
  // user id number
  <div class="imageLabel">
    @Html.ActionLink(@item.userID, "user", "profile",new { id = item.ProfileID })
  </div>
}   

次にcss：

.imageLabel {
  position: relative;
  top: -20px;
}

これにより、アクションリンクが取得され、画像上の最初の位置から 20 ピクセル上に移動します。