如何使用 MVC 方法在图像上显示文本

Question

我是 mvc5 的新手，我必须在图像上显示标签（不在内部，如果可能的话，请告诉我这样做的方法）。

我的标签包含一个文本，我想在该图像上显示该文本。 请看下面（我的尝试）：

<li class="odd">
    <a class="dropdown-toggle" id="btn_dashboard" onclick="return BackToHome();">
        <span><label class="LabelCSSTop">@DateTime.Now.Day  </label>  </span> //This is my text which dislay above the image (not on the image, I also want to increase its defaut size)
        <span class="head-icon head-dashboard" style="margin-top: -15px;"></span> //This displays the image below the text displayed in line above.
    </a>
</li>

是的，当然它会在文本下方显示图像（我的意思是 DateTime.Now.Day），因为编写的代码是这样做的。但是有什么办法可以让我能够在图像的中心显示该文本？ （尺寸大于默认尺寸）

Answer 1

所以假设我们在同一个页面上，你的内容可以有一个 div：

<div class="divination"> 
   <span><label class="LabelCSSTop">@DateTime.Now.Day  </label>  </span>
</div>

然后在你的 CSS 中有一个 divination 类：

.divination{
  height: 50px; // height of div
  display: table-cell; // makes the div behave like a table cell for text content
  vertical-align: middle; // vertically aligns the text content not the image
  background-image: url(../images/divbg.png) // sets the background image. Note: path  is relative to the css file
}

您需要确保 LabelCSSTop 类不会覆盖 div 内容设置。