Jump to content

align form with css


Recommended Posts



I have make a form. But the form is not align. I want to have spece between the label and the input, like in the image. The dual column example you see space between the label and the input.

My question is: how can I make this?


My css is:

label{ display:block; color: white; margin:12px; padding: 12px; }input{ height:40px; width: 190px; font-size:20px;}


thanks in advance.

Link to comment
Share on other sites

  1. Display the label as a block.
  2. Set the width of the label to 50%. Since the input has a border it needs to be slightly less than 50% in width.
  3. Float the label to the left and clear the left side of the label.
  4. In order to align the label and input vertically you can set the line-height of the label and its parent element to a fixed value that's the same for both, then set the vertical-align of the input element to "middle"

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...