//html
<div id="header">
<img src="../../images/siteheader.jpg" width="600" height="200" />
</div>
//css
#header
{
background:black;
margin-bottom:10px;
display:block;
text-align:center;
}
[web] CSS: centering image in Opera
Author
I have a header image that I would like centered. My style works fine in IE 7 and the latest firefox, but in opera it gets stuck on the left.
What's the proper way to center an image using CSS, and more specifically, Opera. I've googled for about an hour and searched the Opera site and surprisingly can't find the correct way.
I just copied the source and tried it out on Opera 8.51... seems centered to me.
Question: When you say opera shows it on the left... does it show a black background stretching till the right of the screen? If your answer is "no", it means that opera is merely making the entire div just 600 pixels wide, and so although the image is at the center of the div, the div itself is small and to the left of the page. If that is the case, just give the div a width: 100%.
If you can still see a black bg stretching till the end, then there is some other problem. Try maybe giving the image an id as well, and centering that using CSS.
Question: When you say opera shows it on the left... does it show a black background stretching till the right of the screen? If your answer is "no", it means that opera is merely making the entire div just 600 pixels wide, and so although the image is at the center of the div, the div itself is small and to the left of the page. If that is the case, just give the div a width: 100%.
If you can still see a black bg stretching till the end, then there is some other problem. Try maybe giving the image an id as well, and centering that using CSS.
Author
That was weird, when I went to take a look at it this morning it worked out fine. Maybe when I was using the preview it was using a cached version.
Probably. Remember to use the "Refresh" button or hit F5 (for Firefox at least) rather than pressing the "Go" button in your address bar... refreshing updates the cache, while re-visiting the URL does not.
Hi,
generally the best way to center any block level elements horizontally is to set the left and right margins to auto. In your case the css might look like:
#header img
{
margin-left: auto;
margin-right: auto;
}
This _should_ work across all browsers. I've noticed that text-align does not always do what you expect it to.
Anyway, I hope this helps!
generally the best way to center any block level elements horizontally is to set the left and right margins to auto. In your case the css might look like:
#header img
{
margin-left: auto;
margin-right: auto;
}
This _should_ work across all browsers. I've noticed that text-align does not always do what you expect it to.
Anyway, I hope this helps!
A margin of auto will leave it up to the browser to decide the margin, which is usually considered bad because browsers maybe evil :o
Just like we should use relative sizes instead of pixels to serve a wide variety of resolutions, we should use some definite method to get the style we want rather than leave it up to the browser and hope that it "_should_" work everywhere.
- My Opinion.
Just like we should use relative sizes instead of pixels to serve a wide variety of resolutions, we should use some definite method to get the style we want rather than leave it up to the browser and hope that it "_should_" work everywhere.
- My Opinion.
Hello again,
A margin of auto tells the browser to fill all availible space. If I may refer you to the spec:
http://www.w3.org/TR/REC-CSS1#horizontal-formatting
Notably this quote: "Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent."
Anyway, best of luck to you with any method that you choose to use.
A margin of auto tells the browser to fill all availible space. If I may refer you to the spec:
http://www.w3.org/TR/REC-CSS1#horizontal-formatting
Notably this quote: "Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent."
Anyway, best of luck to you with any method that you choose to use.
Quote:Original post by Verminox
A margin of auto will leave it up to the browser to decide the margin, which is usually considered bad because browsers maybe evil :o
Actually, no. In this case the behavior of defining both the left and right margins to auto is defined in the standard, so the behavior can be relied upon in compliant browsers.
Quote:from w3c CSS1 Recommendation, section 4.1.2:
if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent.
//EDIT: Looks like the AP beat me to it. :-)
Bear in mind, of course, that the margin-xyz: auto; trick won't work properly under quirks-mode IE. Adding a doctype declaration should resolve this problem.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
