Member Avatar for EvilOrange

Hi,

I have a website in development and i've made it centered regardless of width of the viewing browser window (eg. the browser is 1000px wide and the content is 600px wide and is centered with 200px each side) by using div's.

Now it works perfectly in FF, IE and WebKit (Safari, Chrome etc) but trying to open in Opera it is aligned left...

Now i know opera doesn't recognize text-align: center (how i'm centering the "wrapper" div) so my question really is...does anyone know of a work around for this typr of centering in Opera?

Thanks

  • 5 Contributors
  • 6 Replies
  • 204 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by dflor

Dani AI

Generated

Opera is following the spec here. Text alignment on a parent centers inline content (text, inline elements), it does not magically center a block-level wrapper. A block will only be horizontally centered by auto left/right margins when it has a definite used width. In the OP code the likely culprit is the invalid width: 600 (no unit) — different browsers handle that error differently, and Opera will ignore the invalid length, leaving the element width as auto so margin: auto cannot center it. This ties into points already made by and .

Quick checklist to resolve and diagnose

  • Give the wrapper an explicit width with units (for example 600px or a percent). Browsers ignore invalid length values.

  • Use a standards DOCTYPE so the browser runs in standards mode rather than quirks mode. For modern pages:

    <!DOCTYPE html>

  • Make sure the element isn’t floated or taken out of normal flow (floated/absolutely positioned elements won’t center the same way).

  • Look for CSS parse errors (missing semicolons, stray braces) above the rule — one error can make later rules get ignored.

Two reliable alternative patterns (useful if the width is unknown)

  • Inline-block centering: make the parent text-align: center and the child display: inline-block so the whole box centers but its internal text can be left-aligned.

    .parent { text-align: center; }
.child  { display: inline-block; text-align: left; }

  • Transform centering (no known width needed):

    .centered {
  position: relative; /* or absolute/fixed as layout requires */
  left: 50%;
  transform: translateX(-50%);
}

Summary: the simplest fix in this thread is to correct the width declaration and ensure standards mode; that will make the margin-auto technique work across browsers (as and noted). ’s 50% + negative margin trick also works when the width is known; the transform method above gives the same effect without calculating half the width.

Recommended Answers

All 6 Replies

Member Avatar for almostbob

Hi,

I have a website in development and i've made it centered regardless of width of the viewing browser window (eg. the browser is 1000px wide and the content is 600px wide and is centered with 200px each side) by using div's.

Now it works perfectly in FF, IE and WebKit (Safari, Chrome etc) but trying to open in Opera it is aligned left...

Now i know opera doesn't recognize text-align: center (how i'm centering the "wrapper" div) so my question really is...does anyone know of a work around for this typr of centering in Opera?

Thanks

Its not going to work in any browser, except your own.
open a window less than full screen and your page is shifted right, out of the visible area, click a link and the new page is shifted right out of the visible area. No.
images and borders, sized in pixels
all other elements, sized in ems or %
then the visible page will properly adjust,
Your divs should be something like 10% 80% 10% which will scale, and increase the usable area by 1/3

opera has a few quirks
for the vanishing div try sticking something in it
<div> &nbsp; </div>
still 'blank' but may display differently
check also the styles, different browsers throw away the entire style if the definitions are 'wrong'

Member Avatar for EvilOrange

sorry don't think i was total implicit...

#wrapper {
	text-align: center;
}

#innerwrap{
	text-align: left;
	margin: 0 auto; 
	width: 600;
}

is what i'm using to center the content....
with all content being inside the innerwrapper

Member Avatar for almostbob

the width of #innerwrap could be, throwing browsers off
without a dimension IE firefox opera render differently
IE assumes px
firefox throws it away(but 0 auto margin setting would make it work anyway in firefox)
opera goes funky

body {  text-align:center; }
#innerwrap{ text-align: left;
 margin: 0 auto;
 width: 60%; }

works in opera IE Firefox
I set the body, you set outer wrap, same thing

Member Avatar for ccube921

I'm not sure that that will always work but I use this method to center objects, Position the wrap div left: 50%; this will set the left corner of the div to be in the exact center of the page, then set a negative margin to be half the width of the content (e.g. If your content is 300px your margin would be -150) which will move the content back to the left, centering it exactly. Your end code will look something like this

#wrap
{
Position:fixed;
left:50%;
width: 300px
margin: -Half of your content width (in this case -150px) ;
Member Avatar for Member #360561

I had the same "problem" when testing a site with Opera.

The reason is that align:center is not supported for block objects. This conforms with W3C standards, so Opera is doing it right and the others do not.

Use margin:0 auto; for centering objects,
and text-align:center; can be used to center the contents of a block.

Note that even if you use text-align:center; for a block object, it may not be centered unless you ALSO specify margin:0 auto; for that object.

In these cases, Opera, and in my experience FireFox 3, does this the way it was intended.

Note that for instance <div align:center> is not supported at all except in quirks mode. This is because the layout and style should not be specified in the HTML. That's for the CSS.

Member Avatar for dflor

I think that in css margin-left:auto; margin-right:auto (margin: 0 auto) works fine, for the main table or div, instead of margin-left: 200px.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.