I have a question in regards HTML I want my text to be in the middle of the image not outside of the image. It has to be inside the image in a specific X and Y position.
My code so far:
<center>
<div style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; overflow: show;'>
<div id='loadingtext' style='margin-top: 10px; color: #666; font-family: Arial; font-size: 12px; font-weight: bold;'>Loading Text..</div>
<img src='http://oi58.tinypic.com/2wmou89.jpg'>
</div>
</center>
<div style='-webkit-box-reflect: below -120px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 1.0))); position: absolute; top: 90%; right: 0; bottom: 0; left: 5%; height: 100px; overflow: show; font-family: Arial; font-size: 24px; font-weight: bold; color: #888' id='files'>
</div>
</div>
I would like the text to be in the middle of the image so that people can see the loading text in the middle of the image.
1st: Please remove the keyword "javascript" and replace it by "css" ;)
2nd: The following is a most easy CSS solution. You would need another solution or javascript if the text cannot have a fixed width. But I would suggest to use a fixed width anyway because long lines are ugly. Forget about the terrible z-index solutions. We do not need z-index. The order of the elements has the same purpose.
3rd: solution
<div style="position: absolute;">
<img src="http://oi58.tinypic.com/2wmou89.jpg">
<div id="loadingtext" style="position:absolute; top:50%; left:50%; color: #666; font-family: Arial; font-size: 12px; margin-top:-6px; width:128px; margin-left:-64px; font-weight: bold;">Loading Text..</div>
</div>
margin-top is 0-(font-size/2) and margin-left is 0-(width/2) ...