Centering controls

How To
1

Single Control
To center any control:

  1. Add a grid control to your page
  2. Add the control you want to center into the grid
  3. Right-click on the Grid control and select the ‘Style’ menu option
  4. Add the CSS below to the control
display: grid;
place-items: center;
height: 100vh; /*should exceed the height of the centered control*/
width: 100vw; /*should exceed the width of the centered control*/

Multiple Controls
To center multiple controls inside a cell

  1. Add a grid control to your page and add the CSS as above
  2. Add a Container control into the grid
  3. Add the CSS attribute ‘text-align: center;’ in the Style section of the Container Control
  4. Place all controls you wish to center inside the container control

Note: This method does not work well for RadioButtonList and for CheckboxList Controls due to the default styling applied to these controls.

Here is a Stadium 6 sample application
Centering.sapz (7.5 KB)