0

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?

ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
UnDiUdin
  • 14,924
  • 39
  • 151
  • 249
  • a parent div with class ``row justify-content-center`` and then place the button inside the div. Button will be placed in the center horizontally – OMi Shah Aug 23 '22 at 04:13
  • simply wrap the button in a div with the class ``text-center`` – OMi Shah Aug 23 '22 at 04:21
  • thanks for the comments, but i have little control on the DOM since the DOM is generated by a framework so I prefer to solve it with a CSS class. – UnDiUdin Aug 23 '22 at 10:01
  • Please don't abuse backticks for emphasis. They should be used for literal inline code and file names, not the names of languages or products. – ChrisGPT was on strike Sep 11 '22 at 21:51

1 Answers1

1

Could you try this?

.kiosk-form .centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • Thanks a lot, with this solution I achieve the desired result and I do not need to hardcore the half width in the CSS rules. – UnDiUdin Aug 23 '22 at 10:00