Jquery and Margin: 0 Auto

How to use margin:0 auto in jquery?

TYPO.

auto 0 should be 0 auto:

$(".scale_roll").css({"width" : "80% ","margin":"0 auto"});

Jquery CSS How To Use Margin: 0 auto

You are setting everything correct.
But you cannot center an element with margin: auto that has position: fixed:

Center a position:fixed element

You could also do this with jQuery:

Using jQuery to center a DIV on the screen

jQuery and margin: 0 auto

This solution would also be triggered if the margins were set to percentages, but it might be good enough for your purposes. Basically, you record which margins change on resize. So you'd record the margins before resize to an array:

var aMargins = [];
$('.yourObjs').each(function(i,obj){
var objML = $(obj).css('marginLeft');
aMargins.push(objML);
});

Then resize the window, see which margins changed (these will be either 'auto' or %), do what you need to do to them and return he window to original size:

var wW = $(window).width();
var wH = $(window).height();
window.resizeTo(wW - 5, wH);
$('.yourObjs').each(function(i,obj){
if ($(obj).css('marginLeft') != aMargins[i]) {
// your centering code here
}
}
window.resizeTo(wW,wH);

If your centering code just adjusts the left margin then this should work fine for % based margins too. I can't test this code or provide an example because I'm on the road and writing from my phone, but hopefully this works or helps you come up with something that will.

Margin Auto renders to Margin 0px

Set your parent div

#jam {text-align: center; width: 100%;}

and your child div

#readWrite {margin: 0 auto;}

Draggable And Margin:0 auto;

Chrome returns the position differently than Firefox, but you get proper coordinates using offset, which is what sortable uses. The problem is that on mouseStart, the margin are removed from the calculations, which probably makes sense when you have a margin set. But with auto margin it creates this problem.

You could add an option to ignore margins and modify _mouseStart. Like this:

$("#c").sortable({
ignoreMargins: true
});

$.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) {
...
if (!this.options.ignoreMargins) {

this.offset = {
top: this.offset.top - this.margins.top,
left: this.offset.left - this.margins.left
};
}
...
}

http://codepen.io/anon/pen/BKzeMp

EDIT:

If you don't want to modify the plugin, you can work with start and stop event. One problem is that it's hard to check if margins have been set to auto, so you define them in your sortable call, which is not as flexible as it should be, or you find a way to check which margins are auto dynamically.

$("#c").sortable({
start: function(e, ui) {
var marginsToSet = ui.item.data().sortableItem.margins;
// You set the margins here, so they don't go back to 0
// once the item is put in absolute position
ui.item.css('margin-left', marginsToSet.left);
ui.item.css('margin-top', marginsToSet.top);

},
stop: function(e, ui) {
// Then you need to set the margins back once you stop dragging.
// Ideally this should be dynamic, but you have to be able
// to check which margins are set to auto, which as you'll
// see if you look for some answers on this site,
// doesn't look that simple.
ui.item.css('margin', '20px auto');
}
});

http://codepen.io/anon/pen/mPrdYp

CSS margin:0 auto not working on lia

https://jsfiddle.net/h933o3jy/

You would need to make the li a inline element, and the parent of it should center it via text-align:center. like so:

#wrapper{
width:900px;
margin:0 auto;
text-align:center;
}

li {
display:inline-block;
}

udpate

You will notice there's a space between those li items. To get rid of them, construct the HTML in a way that those tags are glued together. For example: https://jsfiddle.net/h933o3jy/1/ </li><li>

Firefox computed margin auto returns 0

Unfortunately, this comes down to browser differences. To quote an answer to a similar problem:

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

So you're kinda screwed. You have a few options to make this consistent.

You can reliably return auto by hiding the element before you compute the style. Something like this might work:

var $bar = $('.bar');
$bar.hide();
var barMarginRight = $('.bar').margin().right; // "auto"
// do whatever you need to do with this value
$bar.show();

You can also use jQuery's $('.bar').offset(), which returns properties you might be able to use.

// This might not be exactly what you want, but...
$('.spec').css('margin-left', $('.bar').offset().left + 'px');

You can also try to fix the problem with CSS, though we'd need to see your whole page to decide about that.

margin: 0 auto is not centering

floated elements don't behave well with others

as it's a 3 column output, however, it's an easy fix

in general:

html:

<div class='leftColumn col'> ... </div>
<div class='rightColumn col'> ... </div>
<div class='centerColumn col'> ... </div>
<div class='clearFloats'></div>

css

.col { width:32%; }
.leftColumn { float:left; }
.rightColumn { float:right; }
.centerColumn { margin:0 auto; }
.clearFloats { clear:both; font-size:0; line-height: 0; height:0;}

You'll notice the extra "clearFloats" div ... if you don't clear the floats, strange layout issues can happen (not in this case though, it seems) -

I've posted https://jsfiddle.net/97nbtgtb/1/ which changes your markup/css somewhat like above, didn't add any clearing div, and just changed the css to effectively give the center col no float

How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

Check out my example here http://jsfiddle.net/z8gph/

Unless I have your exact setup this is the closest I can get to answering your question.

First position the outer and inner containers relative.

Using jquery to center vertically you get the height of the outer container minus the inner container and divide that by 2. Then set the top with .css of the inner container to the result.

var center = ($("#outer").height()-$("#inner").height()) / 2;
$("#inner").css({"top":center});

EDIT

check out my new example http://jsfiddle.net/z8gph/1/

If you want it to work without setting margin: 0 auto; to help center horizontally see here http://jsfiddle.net/z8gph/2/



Related Topics



Leave a reply



Submit