How to center a button on a page

Question

I have the following code in my button's _postRender function:

myapp.Splash.btnSplashOK_postRender = function (element, contentItem) {
    $(element).find("ui-btn-inner").css({
        "padding-left": "0"
    });
    $(element).css({
        "padding-left": "0",
        "margin-left": "50%",
        "margin-right": "50%"
    });
};

And the result is this:

The padding-left, margin-left, and margin-right are being applied to the div just fine. But the find("ui-btn-inner") doesn't seem to be working at all. And the margin tags don't seem to be taking into account the width of the button in order to get it to the center of the page. What am I missing here?

---

Note: The accepted answer works perfectly well for this simple case. Though @rockmandew's Third Update provides a more powerful alternative for those wishing to do more complex placements.

Answer 1

To align button add "transform":"translateX(-50%)"

$(element).css({
    "padding-left": "0",
    "margin-left": "50%",
    "transform":"translateX(-50%)"
});

Answer 2

To answer to why it isn't working: you forgot the class selector ..

myapp.Splash.btnSplashOK_postRender = function (element, contentItem) {
    $(element).find(".ui-btn-inner").css({
        "padding-left": "0"
    });
    $(element).css({
        "padding-left": "0",
        "margin-left": "50%",
        "margin-right": "50%"
    });
};

If you want you can even chain these functions. (One of the reasons why I love jQuery so much)

myapp.Splash.btnSplashOK_postRender = function (element, contentItem) {
    $(element).css({
        "padding-left": "0",
        "margin-left": "50%",
        "margin-right": "50%"
    }).find(".ui-btn-inner").css({
        "padding-left": "0"
    });
};

Answer 3

I would approach it the same as Lucas - Try this fiddle: http://jsfiddle.net/rockmandew/ddow1nd9/

Basically, I took the button and set its styles to the following:

.test {
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  height:25px;
}

However, this won't work alone - you need to wrap the button in a container (div) and set its position to relative. Which you can see in the following styles:

.button-contain {
  position:relative;
  height:25px;
}

The only issue with this solution is the fact that you have to set an explicit height on your button and set the same height on your button-container, this will allow the other content to respond to the height of the button. When you set the button Absolute, it removes it from the normal flow, thus if you don't set a height on the containing div, the div will have a height of 0 - hopefully, that makes sense to you. If you need further clarification, just ask!

First Update:

Okay, take a look at: https://jsfiddle.net/rockmandew/fhceb7dv/1/ (you will need to replace 'test' with your "$(element)" selector.)

I have adjusted the code for Jquery implementation - since the code is autogenerated, I have included a line of code which will wrap your target element with the "button-contain" I mentioned earlier. I then chained the CSS properties on top of that:

$('.test').wrap("<div class='button-contain'></div>").css({
  "position":"absolute",
  "left":"50%",
  /* My understanding is that the jQuery .css() will add browser prefixes automatically
  "-moz-transform":"translate(-50%, 0)",
  "-ms-transform":"translate(-50%, 0)",
  "-webkit-transform":"translate(-50%, 0)",
  */
  "transform":"translate(-50%, 0)",
  "height":"25px"
});

As you can see, the Jquery takes care of the browser prefixes. So this will wrap your $(element) in a div with the class of "button-contain", it will then set the CSS of the button according to the styles applied. Finally, you will need to add one class to your CSS (unless you want to handle the "button-contain" styles with Jquery as well). So your button-contain will have the same styles as mentioned before:

.button-contain {
  position:relative;
  height:25px;
}

Hopefully, this works for you. I'm not to sure what is going on with the padding though. Lets see where this gets you and go from there.

Second Update:

Try using a similar application of the following code:

$("#elem").css("cssText", "width: 100px !important;");

So instead of:

$(element).css({"padding-left": "0 !important"});

Try using it like so:

$('.test').wrap("<div class='button-contain'></div>").css({
  "position":"absolute",
  "left":"50%",
  /* My understanding is that the jQuery .css() will add browser prefixes automatically
  "-moz-transform":"translate(-50%, 0)",
  "-ms-transform":"translate(-50%, 0)",
  "-webkit-transform":"translate(-50%, 0)",
  */
  "transform":"translate(-50%, 0)",
  "height":"25px",
  "cssText", "padding-left:0 !important;"
});

I haven't tested this because I don't want to take the time to set up an example but I believe it will work. Give it a shot and let me know.

Third Update:

As the OP pointed out, the code in my second update has an error - the "cssText" should be followed with a ':' not a ','

Furthermore, in response to the OP additional comments, I have adjusted my solution to override the initial padding and apply all new (desired) styles. To do this, you will need to create a variable that contains all the styles you want to apply (this is because cssText will replace any existing 'style' tags):

var csstxt = $('.testTwo').css('cssText') + ';position:absolute;left:50%;transform:translate(-50%, 0);-moz-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);-webkit-transform:translate(-50%, 0);height:25px;padding-left:0 !important;';

As you can see, I had to re-include the Browser prefixes because we are no-longer handling the solution with .css() - Once you have the variable with your desired styles, you will want to run it through the following function:

$('.testTwo').css('cssText', csstxt);

This will now produce your desired results. Here is an updated Fiddle with everything I have touched on: https://jsfiddle.net/rockmandew/fhceb7dv/13/

Answer 4

Try setting parent position to position: relative

And then set button style

left: 0;
right: 0;
position: absolute;
margin: 0 auto;

Answer 5

$(element).parent().css({
    "display": "flex",
    "align-items": "center",
    "justify-content": "center"
});