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

Question

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

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

<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的内容设置。