How do I center blocks of text on my form?

  • Profile Image
    imccauley
    Asked on February 14, 2017 at 04: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? 

  • Profile Image
    Welvin
    Answered on February 14, 2017 at 07: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.

  • Profile Image
    imccauley
    Answered on February 15, 2017 at 08: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!! 

  • Profile Image
    AIDAN
    Answered 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.

  • Profile Image
    imccauley
    Answered 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. 

  • Profile Image
    BJoanna
    Answered 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

  • Profile Image
    imccauley
    Answered 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? 

  • Profile Image
    BJoanna
    Answered on February 15, 2017 at 02: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;

    }

    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.