Text On image HTML,css..

Question

I have this:

But i want to have place text in the middle like this:

How do i do it?

I would like to do this in html, so i would use a div or a span to do it

My other question got closed, due to "not a real question", but i am specifying what programming language i want to do this in now.

Answer 1

Create a div that is the dimensions of your image. Then place your text inside. Use margins/padding on your text to get it vertically-centered, and set text-align to "center" for its css.

.imgBox  { width:300px; height:100px; background-image:url('bg.jpg'); }
.imgText { text-align:center; margin:0; padding:25px 0 0 0; }

<div class="imgBox">
  <p class="imgText">Hello World</p>
</div>

Answer 2

To me, this looks like an <img>, then some text in a <span> for example, and then a second <img>. If you put them all into a container that has text-align: center everything should be fine.

Answer 3

Create a div of the same width and height as your image and set the image as the background for the div using css. Put vertical alignment middle and horizontal alignment center on the div and add the text to it.

Answer 4

This may help you out: it's a quick cheat sheet for centering vertically and/or horizontally elements in a web page using proper CSS: W3C centering samples I think you can use any of those techniques and then simply use your 'background image' as background for your surrounding container.

HTH,

Answer 5

You can also use absolute positioning and z-index :

<img src="yourimagefile.jpg" class="background-image" />
<p class="overlay-text">Your Test</p>

And in the CSS file :

.background-image { z-index: -1; }
.overlay-text { position: absolute; top: ??px; left: ??px; }

Some nice references : http://www.w3schools.com/Css/pr_pos_z-index.asp