PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Standard HTML Field Center text

  1. I have used a standard HTML field to put a Name and Address above a section in a form. My trouble is I cannot get the text to center. I have tried wrapping the text in both a <p> or a <span> with this class:

    .aligncenter {
    	clear: both;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }

    Neither is working. Could you help me center my text?

    Posted 8 years ago on Friday November 30, 2012 | Permalink
  2. David Peralty

    Can you please link to your form so we can see what other CSS might be affecting it?

    Posted 8 years ago on Friday November 30, 2012 | Permalink
  3. Sure and Thank you.

    http://www.family-to-family.org/emergency-needs/toy-donations-for-sandys-kids/

    Posted 8 years ago on Friday November 30, 2012 | Permalink
  4. David Peralty

    And so what exactly do you need/want centered?

    Posted 8 years ago on Friday November 30, 2012 | Permalink
  5. Each section has a information about where you are donating. For Example
    Gifts for Gerritsen Beach
    C/O Janet Kennedy
    P.S. 277 Gerritsen Beach
    2529 Gerritsen Avenue
    Brooklyn, N.Y. 11229

    I used an html field to enter that and can't get the text to center.

    I really appreciate you looking at this.

    Posted 8 years ago on Saturday December 1, 2012 | Permalink
  6. Looks like you have a couple different approaches going on there, or some invalid HTML. There are some HTML fields with divs and some with improperly closed HTML tags. Please choose one approach (my recommendation would be a div with a class of "aligncenter") and then clean up the invalid HTML. At that point, we should be able to style all the aligncenter fields. I was able center the fields by targeting them by ID, but that's not a good long term solution.

    [css]
    li#field_12_29 {
        display:block;
        margin:0 auto;
        text-align:center;
    }

    Better to wrap the whole field in a div and give the div a class you can target.

    [php]
    <div class="html aligncenter">
        Gifts for Gerritsen Beach<br />
        C/O Janet Kennedy<br />
        P.S. 277 Gerritsen Beach<br />
        2529 Gerritsen Avenue<br />
        Brooklyn, N.Y. 11229
    </div>
    Posted 8 years ago on Saturday December 1, 2012 | Permalink
  7. I updated all of them to the following:

    <div class="html aligncenter">
    <h1>Gifts for Gerritsen Beach</h1>
    <p>C/O Janet Kennedy<br />
    P.S. 277 Gerritsen Beach<br />
    2529 Gerritsen Avenue <br />
    Brooklyn, N.Y. 11229</p>
    </div>

    I then ran the page the w3c validator and didn't find anything improperly closed. If I missed something could you let me know? I still can't get it to center.

    Posted 8 years ago on Saturday December 1, 2012 | Permalink
  8. Now that the class is present in the HTML field (You can drop the "html" part of the div tag - I was being overly cautious there giving it two classes. We don't need html there) do you have the corresponding CSS in one of your stylesheets? I was able to add this and center the headline and the paragraph:

    [css]
    body .gform_wrapper li.gfield_html div.aligncenter {
        text-align:center;
    }

    Screenshot: http://minus.com/lbBYHT8p53SXZ

    Posted 8 years ago on Sunday December 2, 2012 | Permalink
  9. I do now. Thank You! Worked like a charm. Don't know why I was having such a hard time with that.

    Posted 8 years ago on Sunday December 2, 2012 | Permalink
  10. Glad you got that worked out.

    Posted 8 years ago on Sunday December 2, 2012 | Permalink

This topic has been resolved and has been closed to new replies.