Hi there,
In the past, I've used this simple code to centre an image in the middle of the page:
http://www.warrender.hillingdon.sch.uk/htmlcentring/centring1.htm
However, since learning about the need to specify the doc type, to switch standards-compliant mode switched on, I've realised that this code no longer works:
http://www.warrender.hillingdon.sch.uk/htmlcentring/centring2.htm
Does anyone know of a way to centre an image in the middle of the page, with standards-complaint mode SWITCHED ON? I don't want to do it with CSS, I just want to do it with simple HTML.
Alan
Centring An Image With HTML
Do you mean like the Center command?
<Center> <embed src="Pic.gif"</embed> </Center>
*edit: There fixed it
Centring An Image With HTML
Hi Alan,
Could you set the image as a background image.
body{background:url(imag.gif) center center no-repeat;}
Nix I have no idea what is coming out of your new keyboard
Hope that helps.
Centring An Image With HTML
Sorry about that, its just the G5 keyboard. I was wondering about it so I logged off and got onto my old computer and realized that the G5 keyboard spits out different stuff even though I am pushing the exact same buttons... Sorry 'bout that. I'll change it
Centring An Image With HTML
Thanks for your replies,
Nix, the center command just centers objects horizontally, doesn't it? What I want to do is center an image, both horizontally and vertically using good old HTML.
Thanks Tony for the tip, saying I could "set the image as a background image". But I don't want to use CSS. I want to do it was HTML, hence this post being in the "Off Topic" part of the Forum.
Alan
Centring An Image With HTML
Well since we're off-topic and using HTML, would something like... (deep breath...)
<table> <tr><td align=center valign=middle> <img blah> </td></tr> </table>
work?
Centring An Image With HTML
Hi DJomp,
I've implemented your code. The "valign=middle" property works with an HTML 4.0 Transitional Doc Type with URL. However, since the image that is being vertically aligned has to be within a table, then that table has to stretch to the full height of the browser window, to centre the image in the middle of the browser window (vertically).
And there's the problem.
table height="100%" is not compatiable with an HTML 4.0 Transitional Doc Type with URL. So, how do I make the table stretch to the height of the browser window?
In this example, that uses your valign code, I've set the height of the table to a fixed amount, 400px:
http://www.warrender.hillingdon.sch.uk/htmlcentring/centring3.htm
Centring An Image With HTML
Yeah I did mean to add width=100%; height=100%
just forgot.
Not sure of other ways, will ponder it a bit...
Anyone got any ideas?
Anyone got any ideas how to do it, yet?
To recap, all I want to be able to do is this...
http://www.warrender.hillingdon.sch.uk/htmlcentring/centring1.htm
... but with an HTML 4.0 Transitional Doc Type with URL. It surely must be possible. It sounds so simple.
Alan
Centring An Image With HTML
You could use javascript, but I'd rather chop off my balls personally.
The answer is CSS. Height has been deprecated BECAUSE of CSS. CSS is the replacement, it is the answer.
Use CSS.
CSS.
Centring An Image With HTML
Here you go
.centreit { position:absolute; left:50%; top:50%; width:200px; height:200px; margin-left:-100px; margin-top:-100px; background-color:#3366FF; }
Margin left and margin right, must be half the width and height.
EDIT: Just posted and then saw this http://www.csscreator.com/css-node/789
Regards
Day
Centring An Image With HTML
Yes, well I have this CSS code already. The problem with it is, it can only be applied to one size of image. So, suppose you had lots of different images, of different sizes, you couldn't apply this one CSS style to all of them, to centre them on the page. You'd have to make a different style for each image.
So, CSS (well, that CSS) isn't the answer.
Centring An Image With HTML
no... you make one generic class with the above css.. and then you use inline styles on each particular image to account for different placements.. simple...