Search code examples
htmlandroid-browser

margin-left, margin-right does not work in Android Browser

Consider this code below:

 <!doctype html>
 <html>
 <body>
 <div style="background-color: yellow; width: 100vw; height: 100vh; text-align: center;">
    <button style="display: block; margin-left: auto; margin-right: auto;">This is a button</button>
 </div>
 </body>
 </html>

I tried to run it in Chrome and Mozilla, it produces the output below:

enter image description here

However, when I tried to run it in android browser, the button is in the LEFT side, seems like margin-left and margin-right doesnt work on the android browser. Any idea why?

Solution

  • You need to refresh your browser a few times, it must've cached the css. It looks the way you expect on android 4.4.

    To Clear cache on chrome for android:

    1. Touch Chrome menu > Settings.

    2. Touch (Advanced) Privacy.

    3. Touch Clear browsing data.

    If it still does not work with my demo then let me know what version and browser you're using on android.

    UPDATE: (for those wondering) This was solved by adding a width to the element that is being centered. In order for margin:auto; to work on some old browsers, in this case we added width:auto;

    Demo to test http://jsfiddle.net/Lw543yys/. <> enter image description here

            <>