# [web] CSS: centering image in Opera

This topic is 4451 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

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

//css
{
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 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 on other sites
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.

##### 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 on other sites
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:

{
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 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 on other sites
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 on other sites
Quote:
 Original post by VerminoxA 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 on other sites
I stand corrected =)

##### Share on other sites
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.

1. 1
2. 2
Rutin
16
3. 3
4. 4
5. 5

• 26
• 11
• 9
• 9
• 11
• ### Forum Statistics

• Total Topics
633702
• Total Posts
3013451
×