CODEWITHSUNDEEP
cssasp.netasp.net-mvcrazorasp.net-mvc-5
kalho
kalho

Reputation: 75

How to display text on image using MVC approach

I am new to mvc5 and i am under a situation where I have to show Label on an image (Not inside, If possible then please let me know the way to so also).

My lablel contains a text and i want to display that text on that image. Please see below (My try):

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

Yes ofcourse it will display the image below the text (i mean DateTime.Now.Day) as the code written do so. But is there any way so that i would be able to have that text just on the center of image ? (with size more than default size)

Upvotes: 1

Views: 2595

Answers (1)

rism
rism

Reputation: 12132

So assuming we are on the same page, you could have a div with your content:

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

And then in your CSS have a divination class:

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

You'll need to ensure that LabelCSSTop class doesn't override the divs content settings.

Upvotes: 2

Related Questions