How do I detect if an element has been centered using auto margins? (margin-left: auto; margin-right: auto;)
It seems that when an element is horizontally centered using auto margins, $(myElement).css('margin-left') will return the computed margin of 0px in most browsers (at least Firefox). Is there a way to tell that this is not the real computed margin? Actually, I don't even need the computed margin; it would be enough to just know that the margin was set to auto.
E.g.
- <div style="width:300px;margin-left:auto;margin-right:auto;">
- lorum ipsum lorum ipsum lorum ipsum lorum ipsum
- </div>
Background: I want to know this because I'm developing a rounded-corners plugin that supports the unique table markup generated by an existing app (the markup cannot be changed, but a CSS class can be applied.) The plugin must work using only jQuery to select the tables by CSS class, and it must dynamically adapt to various table widths, margins, and paddings. It must also look right in IE7+/Firefox when changing the text size or zoom factor. So far I'm adding the rounded corners by inserting a div with some child images into the DOM right before the table. But I need to precisely align the div with the table. Matching the width is easy as long as I'm careful to detect the margins, padding, and border-width of the existing table/cells. But I run into a problem when the table is centered using auto margins, because I can't tell the difference between such a table and a normal table with a zero margin.
Right now I'm leaning toward using .position().left. I'm assuming that if left is greater than 0, and margin-left is 0, then it means we have an auto margin. Basically, the logic would go something like this:
- if ($(this).css('margin-left') == 0 && $(this).css.position().left > 0) // margin-left is auto
Does that sound reasonable?
P.S. If you know of a rounded corners plugin that meets all the requirements I listed above, please let me know. I have tried 3 or 4 of the best-looking ones in the jQuery plugin library, and none of them satisfied all my requirements.
Thanks,
Jordan Rieger