Question

I’m working on a project for a client and ran into an issue when testing the website on my Android device. Basically, I just want to center a DIV which wraps around most of the body content.

<img src="images/lightingOverlay.png" style="z-index: 1000; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;" />
<div style="border: solid 5px black; height: 50px; width: 978px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 100px;" >
  wrapped content!
</div>

I used inline styles for now. Even though the div and the image are using identical code, when viewing on the default Android browser, the image gets centered and the DIV doesn’t.

I tried using a left: 50% positioning with negative margin equal to half the elements width as well, but that doesn’t seem to work either.

Anyway, I’ve basically been playing with the code and testing it in Chrome v21 and Android for the last 2 days trying to figure out what the problems…and as you can see in the example, I’ve stripped down to the simplest elements without any luck. Anyone have any idea how I can get the horizontal centering to work in Android?

Answer 1

Alright, centering works now after using

style="width: 1200px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;"

The 1200px width here is the width of the large image overlay I’m using on the page, which also happens to the widest object on the page. It seems like the mobile browser takes the width of the widest element on the screen, and scales it so that this width is equal to the screen width. Then it does the rest of the rendering. If the screen is re-sized after that, apparently it doesn’t bother re-positioning things?

Okay, so I’m not sure why this worked…just that it did. Hopefully it can help someone else who runs into the same problem.