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
CSS Select All Previous Siblings for a Star Rating
Disable iPhone "Save Image" Popup
Webkit Scrollbar Dynamic Styling
Turn Off CSS3 Animation with Jquery
Nav-Collapse Not Working [Twitter Bootstrap]
Get Actual Pixel Coordinates of Div After CSS3 Transform
Get CSS Not-Computed Property-Value with JavaScript Only
Calendar Not Showing Up in Bootstrap Datetimepicker
How to Set a Single Value of Transform While Leaving the Other Values
Click Table Row and Get Value of All Cells
How to Override Inline CSS Through JavaScript
Make Named Anchor Bookmarks Appear Always at Top of the Screen When Clicked
Attempt to Add a Rule to a CSS Stylesheet Gives "The Operation Is Insecure" in Firefox
Get Current CSS Property Value During a Transition in JavaScript
CSS Media Query Height Greater Than Width and Vice Versa (Or How to Imitate with JavaScript)