How to Center All Form Fields?

Hello,

I have searched the help center looking for a way to center all form fields, including the headings. When I enter the CSS I find, it will center some but not all the elements of the fields.

Hi Steve,

Thanks for reaching out to Jotform Support. Let's inject a Custom CSS code into your form center all the form fields. Let me show you how:

1. Copy the CSS code below:

/* Center all form fields */

.form-line {

  text-align: center;

}





/* Center all form labels */

.form-label {

  text-align: center !important;

}





/* Center the form headings */

.form-header-group {

  text-align: center;

}





/* Center the input fields */

.form-input-wide {

  margin: 0 auto;

  text-align: center;

}





/* Center the sub-labels */

.form-sub-label-container {

  text-align: center;

}

2 . Choose the Paint Roller icon located in the top-right corner of the Form Builder.

3 . Navigate to Styles at the top of the Form Designer window on the right.

4 . Under Inject Custom CSS, enter your code; all modifications are automatically saved.

Give it a try and let us know if you need any help.

That's great! Is there a way to get the radio buttons to not be on the left side and be closer to the options?

Hi Steve,

I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

I switched it to dropdown. No worries. I noticed that the headings are not centered on mobile. I would prefer everything to be centered on all devices.

Hi Steve,

Just to clarify, do you still need help adjusting the distance of the radio buttons and options? If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better?

Once we hear back from you, we'll be able to move forward with a solution.