February 15th, 2014, 02:00 PM
Text on top of the image
Hi I have image, and I need to have text overlayed;
I managed to do this using this code:
<div style="position:absolute;top:100px; margin-left: 50px; font-size: 24px; color:white"><p style ="width:166px; text-align: center;" font-size: 24px;>
But no matter what I do, I can not align text properly in the middle. It always shifts left/right denending on the text actual size;
I have tried margin-left:auto and margin-right:auto and dozens of other combinations.
Is it possible to have good clean centered text, when it overlays the image?
February 16th, 2014, 04:13 PM
Are the image widths always going to be known, as in the example you link to?
If so, does this work for you?
<img src="dummy.jpg" class="text-image-image" width="176" height="277"/>
<p class="text-image-text">alpha beta gamma delta</p>
It requires that the image width be known in the CSS, so it's not a general-purpose solution, but if you have known image-widths it might work for you.
February 17th, 2014, 07:05 PM
It's a little messy, and the inline styles you have aren't making it any easier.
What if you increase the padding on...
.contentText table td
so its right against the edge of your blue square. Then you don't need to worry about margins and div's inside there, you can just center it.
And remove the <br />'s and <p>'s that you have in there to create spacing. Just try to use paddings and margins if you can.
March 5th, 2014, 09:23 PM
Placing text on top of the image
Its may be done by using position:absolute and z-index to place the text over the image.
<img id="image" src="/image_gallery/images/d4/androa.jpg"/>