Grow your CSS skills. Land your dream job.

centering divs horizontally on mobile devices

  • # January 6, 2013 at 9:10 am

    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?

    # January 6, 2013 at 9:12 am

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

    # January 6, 2013 at 9:25 am

    Sorry, I should have said this. I did use an external style sheet (just mentioned div style to convey the point). What about the center tag? Is it okay to use it or have I been correctly informed that it will be weeded out?

    > And you might have to fix your layout with media queries for mobile devices.

    Will try that. Thanks. Anyway, this is how I code

    .divouter1{width:100%; text-align:center;}
    .divinner1{width:990px; margin:0 auto;}

    .divouter2{width:100%; text-align:center;}
    .divinner2{width:990px; margin:0 auto;}
    ……. and so on

    And then place them one below the other(the inner div within the outer div of course, and then divs 1,2,3, one below the other). I hope this is the right way to code.

    **P.S** I am a novice

    # January 6, 2013 at 9:27 am

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

    # January 6, 2013 at 9:29 am

    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.

    # January 6, 2013 at 9:31 am

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

    Thanks. Strange though that it does seem to re-size the web page even on mobile devices ( at least the one I made). Will have to go with chrisburton’s suggestion, I think.

    # January 6, 2013 at 9:33 am

    > You could try max-width but I would use media queries.

    That’s what I would do. Thanks.

    # January 7, 2013 at 2:52 am

    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).

    # January 7, 2013 at 2:51 pm

    > Try it out, if don’t work let us know, and if possible host the code somewhere

    Sure. Thanks.

    # January 7, 2013 at 2:56 pm

    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 :)

    # January 8, 2013 at 12:16 am

    > For mobile devices, > I tend to set divs to width 90% / 95% and then margin: 0 auto; them

    What difference does that give over specifying the width in px and then setting the margin to 0 auto? Because I know that my method doesn’t work. I’ll try the meta viewport today. If not, I’ll have to check media queries.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".