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.

Vertical Alignment of Field Labels

  1. circus
    Member

    I am thinking this should be something that is easy to do, but only seem to be hacking my way about.

    On each label in forms on my site I would like to have the label positioned the to the left of the input field. This part is easy and i have done so.

    I would like the label however to be centrally positioned on the vertical (y) axis, so that the gap between both the top and bottom of the field label and the top and bottom of the input box for that field are equal.

    Can anyone please help me out on this?

    Many thanks,
    AB

    Posted 8 years ago on Monday December 19, 2011 | Permalink
  2. Hey AB, can you please post a link to your form so I can see what's going on.

    Posted 8 years ago on Monday December 19, 2011 | Permalink
  3. circus
    Member

    Hi there,

    The site is still in development for a few more days, so best to view it in Chrome.

    You can see a form at the bottom of this page http://79.170.44.87/inkwellwriters.ie/pricing/ and another here http://79.170.44.87/inkwellwriters.ie/contact/

    I just want the label to be positioned vertically central to its input.

    Thanks again,
    Andrew

    Posted 8 years ago on Monday December 19, 2011 | Permalink
  4. Hey Andrew, on line 820 of your style.css you have:

    [css]
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
    font-family: 'LatoRegular';
    font-style: normal;
    font-weight: normal;
    margin-right: 20px !important;
    width: 140px !important;
    }

    You can add a padding-top: 10px; to that if you'd like. You could also use line-height here, but since your "Current Word Count" label is wrapping, that would jack that up a bit.

    Posted 8 years ago on Monday December 19, 2011 | Permalink
  5. circus
    Member

    Hey Rob,

    Thanks for this.

    I have used padding on other installs, but it always seems like a bit of a hack.

    Is there no way to accurately center it?

    Posted 8 years ago on Tuesday December 20, 2011 | Permalink
  6. Because things are floated and you can have variable heights on things (inputs can be different heights than selects or textareas), there really is no silver bullet to align things to the middle of the space vertically with one declaration. The vertical-align CSS property is damn near useless these days and wouldn't work here, especially cross-browser. Line-height or padding will be your safest bet.

    Posted 8 years ago on Tuesday December 20, 2011 | Permalink