12 replies [Last post]
Alan
Offline
Enthusiast
Last seen: 16 years 23 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

Tags:
nix
nix's picture
Offline
Enthusiast
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Last seen: 10 years 44 weeks ago
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Timezone: GMT-4
Joined: 2003-08-12
Posts: 159
Points: 0

Centring An Image With HTML

Do you mean like the Center command?

<Center>

<embed src="Pic.gif"</embed>

</Center>

*edit: There fixed it

I refuse to be like the faceless masses of sheep and have a signatu......awwwwwwwww CRAP!!

Backups? Ha! I've never had troub**&{[}$$ERROR NO CARRIER

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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 Shock

Hope that helps.

nix
nix's picture
Offline
Enthusiast
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Last seen: 10 years 44 weeks ago
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Timezone: GMT-4
Joined: 2003-08-12
Posts: 159
Points: 0

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

I refuse to be like the faceless masses of sheep and have a signatu......awwwwwwwww CRAP!!

Backups? Ha! I've never had troub**&{[}$$ERROR NO CARRIER

Alan
Offline
Enthusiast
Last seen: 16 years 23 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 9 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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?

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Alan
Offline
Enthusiast
Last seen: 16 years 23 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 9 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Alan
Offline
Enthusiast
Last seen: 16 years 23 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

seb
Offline
Enthusiast
Last seen: 13 years 9 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

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.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 20 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

Alan
Offline
Enthusiast
Last seen: 16 years 23 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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.

JohnO
Offline
Regular
Rochester NY
Last seen: 16 years 15 weeks ago
Rochester NY
Timezone: GMT-5
Joined: 2003-12-18
Posts: 16
Points: 0

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...