Vertical Alignment of Field Labels « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

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 12 years ago on Monday December 19, 2011 | Permalink
Rob Harrell
Member

Hey AB, can you please post a link to your form so I can see what's going on.

Posted 12 years ago on Monday December 19, 2011 | Permalink
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 12 years ago on Monday December 19, 2011 | Permalink
Rob Harrell
Member
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 12 years ago on Monday December 19, 2011 | Permalink
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 12 years ago on Tuesday December 20, 2011 | Permalink
Rob Harrell
Member

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 12 years ago on Tuesday December 20, 2011 | Permalink