htmlcsstwitter-bootstrap-3calc

how to use an element width in a calculated value in css?

I am using Bootstrap 3.

To center horizontally in the screen a 300px wide button I use the following CSS code that uses calc:

.kiosk-form .centered
{
  margin-left: calc(50% - 150px);
}

In the code above, I would like to replace 150pxwith something like "element.width/2" (to get rid of the hardcoded half-width in pixels) but I am not able to figure out how to do it.

Could anyone please suggest the solution?

As an alternative, is there another way to horizontally center a button?

Solution

  • Could you try this?

    .kiosk-form .centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}