Check if div has margin auto

Question

I have a div with margin auto, in the center (horizontal).

I want to check with jQuery if the div has margin auto.

I tried to get the margin-left with .css(). Mozilla Firefox shows 0px, and Chrome shows a number of pixels... So with this method I cannot check if the div has margin auto...

What I've tried:

$( document ).ready(function() {
    $("#the_margin").append( $("#example").css("margin-left") );
});

// Check with Chrome and Firefox...
// Firefox returns 0px, but Chrome returns a number of pixels

#example {
  margin: 0 auto 0;
  width: 300px;
  border: 1px solid #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
  Some Content   
</div>

<div id="the_margin" style="font-weight: bold;">
The left margin is: 
</div>

What can I do? Thanks a lot!

EDIT

More clear: HOW CAN I CHECK IF DIV HAS MARGIN AUTO IN JQUERY?

*I have a div with margin auto, in the center (horizontal). I want to check with jQuery if the div has margin auto.* - could you not go by the fact you've said you've set it to **margin-:auto**? — jbutler483, Feb 04 '15 at 12:39
place this onto a class? From what you've said, you're missing a lot of background info here — jbutler483, Feb 04 '15 at 12:42
I looked around a bit and it does not seem to be that easy. I thought that a simple code like this would work, [JsFiddle](http://jsfiddle.net/fwrraojn/), but it did not.. Check out this thread instead: [**link**](https://stackoverflow.com/questions/8356401/is-it-possible-to-determine-which-elements-have-margin-auto) — urbz, Feb 04 '15 at 12:53
In order to achieve this you will need to get all element styles loop through all of them, pick margin and check if it's `auto`. So this solution is not that complex, but definitely not one line. Check [this](http://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element). — dfsq, Feb 04 '15 at 12:55
Thank you all for your helping me. Now the problem is solved. — MM PP, Feb 04 '15 at 15:02

score 0 · Answer 1 · answered Feb 04 '15 at 12:42

0

I think your problem Mozilla Firefox shows 0px, and Chrome shows a number of pixels can be fixed this way :-

#example {
-webkit-margin: 0 auto 0;
-moz-margin: 0 auto 0;
width: 300px;
border: 1px solid #CCC;
}

FIDDLE:

You need to specify the browser while setting margin css

answered Feb 04 '15 at 12:42

Tushar Raj

761
6
20

What do you mean by it doesn't works ? It is working in the fiddle and i haven't used any strange css to fix this . – Tushar Raj Feb 04 '15 at 12:50
1

It doesn't make any sense at all, because `margin` has never required vendor prexies. And of course it doesn't work, since div is not centered, which means that `margin: 0 auto` is not applied. The reason why you see `0px` in your demo is because without CSS rule for margin browser applies default margin value which is 0 for margin-left. – dfsq Feb 04 '15 at 12:52
@TusharRaj Have you tried with Firefox? BTW: the div is not centered. – MM PP Feb 04 '15 at 12:52
yes i have checked in Firefox . The fiddle is working there too @MMPP – Tushar Raj Feb 04 '15 at 12:53
https://browserling.com/browse/firefox/35/http%3A%2F%2Fjsfiddle.net%2Fv804srt2%2F – MM PP Feb 04 '15 at 12:58
i checked the link . It is the same as in fiddle . I didn't get you @MMPP this time ? – Tushar Raj Feb 04 '15 at 13:01

score 0 · Answer 2 · answered Feb 04 '15 at 13:48

i think the other way can be calculated.

only top example for calculated margin-left value:

$('#example').offset().left - $('#example').position().left

$(document).ready(function() {
  $("#the_margin").append(
    $('#example').offset().left - $('#example').position().left
  );
});

#example {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  position: relative;
  width: 300px;
  border: 1px solid #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="example">
  Some Content
</div>

<div id="the_margin" style="font-weight: bold;">
  The left margin is:
</div>

NETCreator Hosting - WebDesign · Accepted Answer · 2015-02-04T15:23:38.197

Created a function which reads the css and check the specified id if has margin with auto.

JS (JQuery)

function check_center( the_id ) {
    var result = "";
    var sheets = document.styleSheets;
    var attribute_style = $(the_id).attr( "style" );
    if(attribute_style.match(/margin:([a-z0-9- ]+?)auto/) || attribute_style.match(/margin:auto/) || (attribute_style.match(/margin-left:auto/) && attribute_style.match(/margin-right:auto/)) || (attribute_style.match(/margin-left: auto/) && attribute_style.match(/margin-right: auto/)) ) {
        result = "true";
    } else {
    the_id.matches = the_id.matches || the_id.webkitMatchesSelector || the_id.mozMatchesSelector || the_id.msMatchesSelector || the_id.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (the_id.matches(rules[r].selectorText)) {
                if(result != "true") {
                    if(rules[r].cssText.match(/margin:([a-z0-9- ]+?)auto/) || rules[r].cssText.match(/margin:auto/) || (rules[r].cssText.match(/margin-left:auto/) && rules[r].cssText.match(/margin-right:auto/)) || (rules[r].cssText.match(/margin-left: auto/) && rules[r].cssText.match(/margin-right: auto/)) ) {
                     result = "true";
                    } else {
                     result = "false";  
                    }
                }
            }
        }
    }
    }
    if(result == "") {
     result = "false";   
    }
    return result;
}

$( document ).ready(function() {
    $("#the_margin").append( check_center(document.getElementById('example')) );
});

HTML

<div id="example" style="width: 300px;">
    Some Content   
</div>

<div id="the_margin" style="font-weight: bold;">
    The div is centered?  
</div>

CSS

#example {
margin: 0 auto 0;
border: 1px solid #CCC;
}

Fiddle http://jsfiddle.net/vn6ajt6r/6/

It works for:

External style sheet
Internal style sheet
Inline style

Check if div has margin auto

3 Answers3