The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Form Styling Question

  • # August 3, 2009 at 3:04 pm


    I’m a little stuck trying to put the finishing touches on a couple forms.

    Here is the page I’m working on:

    The forms in question are in the upper-right of the header.
    All I want to do is get the label text and the text in the input box to be centered vertically relative to the input box. For the life of me, I can figure it out. If anyone could kindly shed some light on this for me, I’d greatly appreciate it. Thanks in advance!


    # August 3, 2009 at 3:43 pm

    This reply has been reported for inappropriate content.

    Remove the height and give the boxes equal top and bottom padding. Might also want to change the button alignment to top.
    Something like this:

    input#quickSearch, input#emailSubmit {
    border:1px solid #000000;
    padding:5px 0 5px 10px;

    .button {

    # August 3, 2009 at 3:52 pm

    Thank you, sir. A simple and elegant solution.
    Much appreciated. :D

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed