centering divs horizontally on mobile devices

[Krish1980]

Hello,

I’m in a bit of a fix. I’m working on a project and the method **div style=”margin:0 auto;”** works perfectly fine of a desktop, but gets messed up on mobile devices.(information getting randomly aligned as opposed to horizontal center). Strangely enough, on an earlier website , I used the “center” tag and _that_ seems to work like a charm. It even aligns itself beautifully in the landscape and portrait modes perfectly on mobile devices.

I’m reluctant to use the ‘center’ tag as I’m told this tag will be eventually weeded out. Any suggestions?

[chrisburton]

Use a stylesheet, not inline css. And you might have to fix your layout with media queries for mobile devices.

[dfogge]

just to confirm what you’ve heard, the center tag IS deprecated in html5.

[chrisburton]

You set the width to 990px which won’t work on mobile as it’s much wider than a typical mobile viewport. You could try `max-width` but I would use media queries.

[ooredroxoo]

I Did have a problem design for mobile once, where are give a white space on the right side of the device, to solve the problem I’ve used the meta declaration for view port from [H5BP](http://html5boilerplate.com/).

Inside my Head tag.
Try it out, if don’t work let us know, and if possible host the code somewhere (on your host or codepen, gist, you know).

[lucas572]

For mobile devices, I tend to set divs to width 90% / 95% and then margin: 0 auto; them. But yea, don’t forget the meta viewport which will sort everything out for you :)

[Author]

Posts