Submit Button: Text Not Vertically Centered

The text within the submit button is at the bottom instead of in the middle.

Hi accessopportunity,

Thanks for reaching out to Jotform Support. You can inject custom CSS code to change the text alignment of the submit button. Let me show you how:

1. First, copy this code:

.submit-button {

  vertical-align: middle !important;

  padding: 0 0 !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

That's it. The label of the submit button will display correctly.

Give it a try and let us know if you have any other questions.

I did that but unfortunately it didn't seem to do anything.

Hi accessopportunity,

I cloned your form and noticed that the existing custom CSS you’ve added for paragraph, labels, and matrix tables is conflicting with the styling of the Submit button. That’s why the text isn’t vertically centered.

To fix this, replace your current CSS with the updated version below, which keeps your existing adjustments but also ensures the Submit button text is properly centered:

/* remove padding around paragraph */



[data-type="control_text"] {

padding-top: 0 !important;

padding-bottom: 0 !important;

margin-top: 0 !important;

margin-bottom: 0 !important;

}



.form-label.form-label-auto {

display: inline-block;

float: left;

text-align: left;

}



table.form-matrix-table {

width: 100% !important;

max-width: none !important;

}



.form-matrix-row-headers {

white-space: nowrap;

}



/* maximize width for table and multiple choice field */



.form-matrix-table,

.form-checkbox-item {

max-width: 100%;

}



.qq-upload-button,

.submit-button,

.form-submit-reset,

.form-submit-print {

font-size: 14px;

padding: 0 !important; /* changed from 12px 18px */

display: block;

width: 50%;

margin: 0;

font-weight: bolder;

font-family: inherit;

border: none !important;

border-width: 0 !important;

border-style: solid !important;

height: 50px !important;

line-height: 50px !important; /* vertically center text */

text-align: center !important;

}

Check out my screencast below to see the result:

Try that and reach out again if you need more help.