Sign in to follow this  
ChurchSkiz

[web] CSS: centering image in Opera

Recommended Posts

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.
//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;
}

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
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.

Share this post


Link to post
Share on other sites
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. :-)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this