Center Align Value Inside Number Field Using CSS Codes

What is the CSS code to center the value input for a numerical text box? 

Hi digitalstrategy,

Thanks for reaching out to Jotform Support. To center the numerical value inside the Number field, you can inject the custom CSS codes below. Let me show you how:

1. First, copy this code:

input[type="number"] {

  text-align: center;

}

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.

I also noticed that the Number field isn't centered when previewing the form. You can use the custom CSS below to align it properly to the center.

#id_72 {

  width: 100% !important;

  float: none !important;

  clear: both !important;

  text-align: center !important;

}

#cid_72 {

  position: relative;

  margin-left: 250px; /* adjusted from -80px */

}

Here's the sample result after injecting the custom CSS codes below:

Give it a try and let us know how it goes.