Browser support for using margin left/right to align left or right

[pcenero]

Can all (major) browsers left align or right align elements using margin-right: auto and margin-left: auto, respectively?

I did this last year (I think) with Mozilla Firefox, and it didn’t work. But when I tried now, it actually aligns it perfectly. I just want to know if this is a valid way, and a relatively well supported method?

Edit:

I do not mean center aligning stuff (already know how to do that.) I mean, like this:

https://jsfiddle.net/akhurshid/2sswp/

And I do know about using floats to align. I just want to know if setting one property to be auto is “correct.”

[Paulie_D]

Yes.

As for what didn’t work last year…we can’t comment as we don’t know what you tried.

That said, I can’t think doing it this way is very useful.

[pcenero]

Really? Horizontally aligning something without making the proceeding content flow seems useful, i.e.:

.foobar {
    margin-left: auto;
}

vs.

.foobar {
    float: right;
    clear: both;
}

[Paulie_D]

As a single element on a row sure…but put another element on the same row and you see why floats are usually used.

https://jsfiddle.net/ggqymnes/

These days, I’d use flexbox where it does make sense to use margin-x:auto

https://jsfiddle.net/rukpv5gh/

[Author]

Posts