Grow your CSS skills. Land your dream job.

Centering a liquid form

  • # June 26, 2012 at 3:09 pm

    Hello,

    I’m trying to create a liquid form that is centered. I’ve made sure to keep content and padding to a simple 25%, 50%, 25% relationship, however my form looks off-center due to what I think is the specified width of the labels themselves.

    Example

    If the labels didn’t carry any specific width, I could simply add a text-align:center; rule to both the labels and inputs and everything would be centered up…except the labels wouldn’t align vertically with eachother. Oh and adding a margin:0 auto; to either the container, label or input elements does nothing.

    # June 26, 2012 at 4:52 pm

    To me it appears that the labels are 1/3 and the inputs are 2/3 of the 50% area. Why not make the floats (labels) have a width of approximately 30 – 33%? You’d then have to reconfigure the submit to line up as well…

    # June 27, 2012 at 9:51 am

    Appearance wise that 30-33% on the labels looks good!

    Thanks

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".