I've seen this answered on here many months ago, but I can't find it with the search tool.
I have a picture on a homepage (Click), which I would like centered between left-right and top-bottom. I can do the left-right centering with HTML <CENTER>, but I can't work out how to get it top-bottom centered with CSS.
Can someone nudge me in the direction of an answer ?
havik...... #pict { text-align:center; width: 100%; height:100%; vertical-align: center; }
As stated above, CSS does not have a vertical-align for use in this application. It works within an image tag to align the text relative to the image and uses 'vertical-align:middle'
nkaisare...... img {left: auto; right: auto; text-align: center;} /* This is for IE */}
If you remove the text-align:center it will not work in IE6. As far as I know (confirmed by testing) text-align:center will center anything (almost) that is contained within the <div>.
The example you provided uses position:absolute and will not accommodate differing resolutions or window sizes. The top:50%, left:50% does not center the enclosed div but centers the top, left corner.
If you remove the text-align:center it will not work in IE6.
Of course. Thats why I added text-align: center. Thats for IE. left: auto; right: auto are for standards compliant browsers.
The example you provided uses position:absolute and will not accommodate differing resolutions or window sizes. The top:50%, left:50% does not center the enclosed div but centers the top, left corner.
Very true. But you did not read the next part. If an image is 100px wide, use
margin-left: -50px;
left: 50% will offset the div by 50%
margin-left: -50px will push the image half way to the left, giving it horizontally centered look.
The code that I pasted is valid and works to the T. Copy-paste it, and see for yourself how it works.
I'm relatively new to CSS positioning, but not to website design in general, and am certainly not here to be antagonistic.
Here's a quote from O'Reilly's 'Cascading Style Sheets' The only way to center an image using text-align is to wrap a DIV around the image, and set the DIV's contents to be centered.
I tried the following in IE5, NS7, and Opera6. (not all at once of course) and here are my observations.
<html><head><title>Untitled</title>
<style type="text/css">
/* Doesn't work on any platform */
img {left:auto; right:auto; text-align:center;}
/* works as expected on all platforms but will need absolute vertical positioning and knowledge of the image size to position correctly.*/
img { position:absolute; left:50%; }
/* works as expected but suffers from the same problems as above */
div.d1 { position:absolute; left:100; top:150; width:200; height:200; border:1px black solid}
div.d2 { position:absolute; left:50%; top:50%; width:100px; height:100px; border:1px green dotted; margin-left:-50px; margin-top:-50px;}
/* Correctly centers the images but still requires vertical positioning */
#pict { text-align:center; padding-top:20%; height:100% }
</style>
</head>
I don't know how reliable this is but it seems to wotk in IE6, Mozilla 1.2, Opera 6.03 and Netscape 6.2.
This will centre an image vertically and horizontally:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centre image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
height: 100%;
}
img {
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image height */
margin-left: -30px; /* make this half your image width */
}
</style>
</head>
<body>
<div ><img src="img.gif" width="60" height="60" /></div>
</body>
</html>
The idea is to set the body to 100% to give the image a container to find the centre of. The image is absolutely positioned 50% from the top and 50% from the left. The left and top margins of the image is then set to minus half the image width and height which should drag it back to centre (theoretically).
I don't know if this works in IE5 but it works in IE6 in quirks mode so it might work??
Hope this is of some use.
Paul
Edit: Whoops ...perhaps I should read all the posts before I jump in!! The routine above is basically the same as already been stated above, but the key to it working on different window sizes is setting the body to 100%. This means the image will stay central when the window is resized. (If you don't set body to 100% IE will not keep the image central as the window is resized.)
img { position:absolute; left:50%; }
1. This will position left edge of the image at the center
2. Remember absolute positioning is positioning with respect to the parent positioned element, or the viewport (browser window) if none exist.
I guess I'm trying to understand your objection to the code I posted above?
I don't. I simply added left: auto and right: auto for compliant browsers.
Edit: Not required. Nedals' was correct there.
And also provided alternate CSS method.
Edit: Yes this method works too.
BTW, when you tried, did you use a complete doctype. If not, the browser may go into buggy mode and results will be different. I tried it with strict dtd.
Edit: Again, this was nested divs. I was applying text-align to inner div. My mistake again.
Edit: I left my original (incorrect) msg as is so that people reading this thread later can understand what this discussion was all about.
OK... Here's where I am.
Using that code I posted....
I was using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
img {left:auto; right:auto; text-align:center;} // doesn't work on IE5, NS7, or Op6. Everthing else working as expected.
using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
img {left:auto; right:auto; text-align:center;} // doesn't work on any platform.
Everything else working as expected on IE5 and Op6 but NS7 messed up the 'd1' and 'd2' DIV's
All these wonderful standards.
Sometimes I think of the W3 consortium as the committee that designed the horse and came up with the camel.
Much as I hate Microsoft, they do have the predominant browser and I can't imagine why the W3 didn't design a standard that was
at least fully compliant with something!
Originally posted by nedals All these wonderful standards.
Sometimes I think of the W3 consortium as the committee that designed the horse and came up with the camel.
Much as I hate Microsoft, they do have the predominant browser and I can't imagine why the W3 didn't design a standard that was at least fully compliant with something!
http://www.w3.org/TR/REC-CSS2/
CSS-2 Recommendation: 12-May-1998
IE 5.0/Win released August 18 1999
So you see, the specs predate the browser.
I also feel that one should not harbour too much on specs. Specs are also made by people. But the good thing about them are:
1. They are made by a consortium that is composed of developers from most major browser vendors
2. Even if specs are not 100% correct (may be satisfactory is more appropriate word), if we have browsers adhering to them, we will have consistency. What works in one WILL work to a fair degree in another.
3. Backword compatibility is easier to maintain if there is standards compliance. We have printed books which are not going to change over time. But if one technology becomes obsolete/redundant, we run into great danger of losing historical stuff (sic).
But specs are not always the best... hence the need to keep improving and innovating. Pertaining to this thread, for example, IE box model makes more sense to me than the specs. Here is an interesting read on this topic: http://netdiver.net/interviews/peterpaulkoch.php
More appropriate anecdote would be: W3C designed bones and the flesh for making a horse. IE made a camel, NS made a zebra, Opera made a mule.
Reply With Quote
Bookmarks