如何在jQuery中使用margin：0 auto？

Question

I tried to center align a div on click, but this is not working

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

When I used marign-left : 100px it works fine. What is the problem in aligning the div to center using this property in jQuery?

Answer 1

TYPO.

auto 0 should be 0 auto :

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

Answer 2

Your target in click function is empty, it should be something like this:

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

working DEMO

Answer 3

Move div to the center and then back to its original position. Please click " Run code snippet " below

 $(".scale_roll").click(function(){ if($(this).width() == 100) $(this).css({"width" : "80% ","margin":"0 auto"}); else $(this).css({"width" : "100px ","margin":"0"}); }); 

 .scale_roll{ width:100px; height:100px; background-color:green; color:#fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="scale_roll">Click Me<div> 

Answer 4

You have not spelled your click function correctly.

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

Answer 5

I guess instead of giving "margin":"0 auto" you can give "margin":"auto" .

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

This my working Demo