HTML: Horiztonal and vertically align tex

D.P.

D.P.

D.P.

Caporegime
Joined
18 Oct 2002
Posts
32,736
EDIT: found a hacky solution eventually, none of the solution I found on-line worked but setting a margin-top to a negative value aligned my text in chrome.
 
Last edited:
I haven't got time to test this myself but I think...

You could set the image as a background image on the main div rather than embedding it in img tags. Then you can wrap your p tag in another div so you can set that div to 'display: table-cell' - that will allow you to vertically align the contents, then you can horizontally align the text in the p tag.. Something like this:

Code: 
<div id="container" style="width:240px; height:427; display: table; background-image:url('/images/image.png'); background-repeat:no-repeat; background-position:center top;">
<div id="text" style="display: table-cell; vertical-align: middle;">
<p style="text-align: center;">My text here</p>
</div>
</div>

(excuse the messy inline css)

If you didn't want the image as a background of the div I think you could just add the img tags inside the div and then set it with absolute positioning.
 
planty said:
I haven't got time to test this myself but I think...

You could set the image as a background image on the main div rather than embedding it in img tags. Then you can wrap your p tag in another div so you can set that div to 'display: table-cell' - that will allow you to vertically align the contents, then you can horizontally align the text in the p tag.. Something like this:

Code: 
<div id="container" style="width:240px; height:427; display: table; background-image:url('/images/image.png'); background-repeat:no-repeat; background-position:center top;">
<div id="text" style="display: table-cell; vertical-align: middle;">
<p style="text-align: center;">My text here</p>
</div>
</div>

(excuse the messy inline css)

If you didn't want the image as a background of the div I think you could just add the img tags inside the div and then set it with absolute positioning.
Click to expand...

Sorry, I guess I should have left the original post in place but I didn't want people to spend too much effort on so,etching I hacked a fix for.

Crazy how often you spend hours getting something to work and after going to get help you fix the problem!
 
Thanks for relies both of you. I did try the table-cell method you proposed but it then seemed to prevent the horizontal align working. But by that point I may have introduced other bugs I didn't pick up on (why I prefer compiled languages)
 
You must log in or register to reply here.
Back
Top Bottom