如何使用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类不会覆盖divs内容设置。