• Networking: The investigation is still on the way, we've switched to backup telecom carriers since the episode but we're still working in settling everything as it must be. We'll add more updates as we have them available. Incoming and outgoing emails will be restricted, and user registration has been disabled until the issue is resolved.

Image Centering

Custom Title Activated
Loyal Member
Joined
Dec 10, 2004
Messages
1,053
Reaction score
0
I'm having a bit of trouble vertically centering an image (preferrably with CSS) on a page.

Example:
Code:
<html>
<head>

<style type="text/css">

.centerme {
	vertical-align: middle;
}

</style>

</head>
<body>

<table border="0" height="100%">
  <tr>
    <td>
      <img src="myimage.jpg" class="centerme" />
    </td>
  </tr>
</table>

</body>
</html>

This will properly show the image as vertically centered. However, when a DOCTYPE is added (I've tried the doctypes for XHTML and 4.01 Transitional) it no longer centers.

Any suggestions on this?
 
Shawnmb - Image Centering - RaGEZONE Forums


Shawnmb - Image Centering - RaGEZONE Forums


I appologize for the bad explanation, tired :)
 
In my opinion this can't be done. You can't dynamically vertical-center a picture unless:

1. You know the size of the container the picture is in (e.g the page or in your case it was a table row)
2. The size of the picture
3. It is no longer XHTML

p.s.
a picture can easily be centered horizontal wise though.
 
I guess I'll have to try an absolute location for the image in CSS then, I read up a bit more on that "vertical" CSS line, it looks like that's only intended for text in a table cell.

thanks for the replies.
 
Shawn has a point though: you -could- position it in the center of a div or table element vertically, and align the rest of your site absolutely to the div. That way at least it would be in the center of the design, vertically.

How about make a div 100% height + width. Add the picture in the center. And have other divs position relative on left and right side using clear attribute?
 
Re: sage

Remove the DOCTYPE then -.-

Is it really that hard to think of that?

Well I guess I have to admire you for the guts to post such thing. Nevertheless lets hope this was just a little mistake.

Removing the doc type is like telling the browser to figure it out for themselves. XHTML and specifically XHTML strict has been developed to ensure the page is displayed as the creator intended it. By removing the doc-type you no longer write XHTML.

This ain't a solution it might work on one browser but it might well break a lot of other things on your page as well.
 
Re: sage

Well I guess I have to admire you for the guts to post such thing. Nevertheless lets hope this was just a little mistake.

Removing the doc type is like telling the browser to figure it out for themselves. XHTML and specifically XHTML strict has been developed to ensure the page is displayed as the creator intended it. By removing the doc-type you no longer write XHTML.

This ain't a solution it might work on one browser but it might well break a lot of other things on your page as well.

Thanks for writing that out, saved me the time. :)

Also, I appreciate the suggestions. Thank you!
 
sage

Well I guess I have to admire you for the guts to post such thing. Nevertheless lets hope this was just a little mistake.
I'm being completely serious. Use whatever works.
This ain't a solution it might work on one browser but it might well break a lot of other things on your page as well.
Well... install a few browsers and test. All I'd worry about are the big 3 (IE, FF, Opera) - if it works, use it. Actually, upload the two sample pages on some free webhost and ask other users to test it for you.
 
username1, I have no doubt you're a good C/C++ coder, but when it comes to HTML, please don't give invalid advice.

YukiNeko is right, the doctype isn't just some tool you can discard if you don't feel like using it. Whatever works without doctype will definately NOT work in IE7 and FireFox2 since they both have a different default HTML renderengine.

If you write invalid HTML it might work now for one or two browsers but its the same as using old crappy code that works but is unreadable, unmaintainable and will break down the next compilerupdate comes along. Especially for the web it is vitally important to code valid HTML, if not strict then at least transitional - which, by the way, is the default render engine in IE6 if no doctype is found.

As for making a div 100% height: I'm not sure you can. At least, not with valid HTML. The problem lays with HTML's blockmodel, that states that blockelements such as DIV's are rendered before their content is. You can either give a div a set width and the content will be rendered in it and overflow if you have overflow: auto; set in your CSS, or simply vanish at the bottom if you used overflow: none;, or you can set it to auto (default setting in fact) where it will be as heigh as the content (+margins +padding), but in either case there are problems with content being too long for the page, browsers such as FireFox not supporting % heights, etc.

Like I said, its probably best to use a div around your entire content (you can try using margin: auto; to get it centered both horizontally and vertically, though I am not sure wether that'll work) and use a specific div for the image and center it relative to that.
 
I took the trouble to try google, and found the following code. The good news is that it works in FF2 but not in IEX6.

Nevertheless perhaps it inspires people to use google more often and perhaps even find a actually working example for more then a single browser.
 

Attachments

try using padding for css

Please share a working example. Which works with more then 1 browser.


or use <center></center> for body, <center> is the most easy way without using css.

We are looking for a CSS solution. <center> tag is not supported by XHTML strict. As it is a deprecated tag. CSS should be used to horizontal align text or images. Which can be done with

text-align: center;

margin: 0px auto; (where of course 0px can be a other measure or value)
 
Back