How to writte text in the middle of an image without positioning and z-index?

I am creating an email template and i need to writte text in the "middle" of an image, but some email system's doesn't allow positioning, what can i use?


<img src="" style="width:400px; height: 350px;" />
<p style="color:blue;">SOME TEXT FOR CONTENT..</p>



If you're doing this for email, I'd recommend adding the text to the image itself, rather than positioning it with a background-image. The reason for this is that background-image isn't very well supported (particularly in Outlook 07/10/13) and will have to fallback to a solid colour, which may ruin the entire design.

I'd also move away from p tags, as they can render differently in different email clients.

Here's a JSFiddle of the finished code:

Also, this link is quite helpful for finding out what CSS is supported in which email clients:

All in all Natalie has right. If you want to try something like this:

<td valign="middle" background="your_image.jpg" width="100%" style="background-image: url(your_image.jpg)">
Your text here

should work in all major mailer (web and offline); except, as far as i know, Outlook 2007 and Outlook 2010.

Be aware that i put both the standard definition of background image AND the inline CSS one.

what about this alternative?

<div style="background-image:url('');background-size:cover;width:400px; height: 350px;display: inline-block;"><p style="color:blue;">SOME TEXT FOR CONTENT..</p></div>

Need Your Help

How to auto-deploy web-app

php deployment automation

I'm trying to make sense on the best way to do automatize a series of things in a row in order to deploy a web-app and haven't yet came up with a suitable solution. I would like to:

Application Dashboard View Logic

ruby-on-rails ruby dashboard

In my application I would like to provide a dashboard like screen when they login to get an overview of what is happening. I have about 4 models I would need to collect data from and sort them into...