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?

Answer 1

I think your problem can be fixed this way :- 可以通过以下方式解决：-

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

You need to specify the while setting margin css

Answer 2

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> 

Answer 3

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