How do I center blocks of text on my form?

  • imccauley
    Asked on February 14, 2017 at 4:02 PM

    I'm trying to center blocks of text (fields) on my form underneath my category headings, but I'm not having much success. Can you please help me with this issue? 

  • Welvin Support Team Lead
    Replied on February 14, 2017 at 7:07 PM

    I think you have figured this out already. I see some texts in the form are now centred. Please let us know if you require additional assistance.

  • imccauley
    Replied on February 15, 2017 at 8:10 AM

    Actually I'm still struggling to center the text blocks. I was able to center headers on my form, but need code/help centering the different fields within the headers. Can you help me with this? Thanks in advance!! 

  • AIDAN
    Replied on February 15, 2017 at 10:01 AM

    Hi,

    Sure we can help. Please point us to all what you would like centered, and we will assist you with that ASAP.

    Thank you in advance. We are awaiting your reply.

  • imccauley
    Replied on February 15, 2017 at 10:08 AM

    I want to center all fields from "Parish or Mission" to "Please leave a comment..." on the first page. 

  • BJoanna
    Replied on February 15, 2017 at 12:34 PM

    Add this CSS code to your form:

    .form-section {

        margin :0 auto !important;

    }

    .form-line {

        text-align : center !important;

    }

    .form-label.form-label-top {

        text-align : center !important;

    }

    .form-input-wide.jf-required {

        margin :0 auto !important;

    }

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • imccauley
    Replied on February 15, 2017 at 12:58 PM

    Thanks for this help, but the code didn't align dropdown inputs. Is there a way to correct this? 

  • BJoanna
    Replied on February 15, 2017 at 2:56 PM

    I am not exactly sure if I understood you correctly. Dropdown fields should be center aligned. If you also want to center align dropdown options that was selected the add this CSS code as well. 

    select {

        text-align-last : center;

        text-align : center;

        -ms-text-align-last : center;

        -moz-text-align-last : center;

    }

    How do I center blocks of text on my form?  Image 1 Screenshot 20

    Fields that are not aligned properly are Shrink fields. 

    Here is my demo form: https://form.jotform.com/70455096873970 

    Let us know if you need further assistance.