How to vertically align form inputs

can anyone explain me how to vertically align my form inputs
here is my codepen link:

You can do it using by nesting your entire form in a <div> with an id and then styling that particular div with height: 100%; width: 100%; display: flex;. However, in order for it to work the way I think you want, I would suggest breaking up the “What would you like to see improved? (Check all that apply)” list you got, since it is all on one single line at the moment (for example, you can use <br> between a few of them to achieve this). Hope it helps. If it solved the problem, you can mark this question as “solved”.

not working, I tried various css methods and it doesnt work idk what I am missing

Oh ok, maybe I misunderstood your end goal then. Do you want all the items to be similar to this picture?


Or something else? Maybe you can describe further how you want the end result to look like.

1 Like

yes i want to look like that

First, there are a number of errors in the Code:



Like: The<label> tag on line 25 has no closing tag.

THE ANALYSE FUNCTION ON CODEPEN CAN HELP YOU FIND ERRORS LIKE THIS:
Screenshot 2022-03-25 8.58.52 PM

Screenshot 2022-03-25 8.58.17 PM

Ok, for this I simply put <br> (break row) between each of your checkbox options and between each segment for name/email/age input (so not so much information is on the same line). Apart from that you can adjust your form-code to something like this:

<div id="centerDiv">
<form id="survey-form" action="URL">
THE REST OF THE FORM HERE...
</div>

And in your CSS you should have something similar to this, in that case:

#centerDiv{
  height: 100%;
  width: 100%;
  display: flex;
}

#survey-form{
margin:auto;  
}

Also, I suggest you take a look at the tip you got from @ALLESS regarding errors in the code, really useful.

I would not recommend this. The <br> element has a very very small use case and forcing elements to stack is not one of them.

One way to achieve this is to wrap each label/input in a div which will cause them to behave as a single block level element. Don’t be afraid to add divs for styling. This is one of their intended uses.

P.S. Since you are nesting the inputs in labels, you could also just give the labels a display type of block. Personally, I never wrap inputs in labels because historically there have been accessibility issues with certain screen readers in some situations. So keeping the label and input separate and associating them with the for attribute is the most rock solid way to go.

AN ARTICLE ADDRESSING LABELS AND ACCESSIBILITY USE:

That article does have some good accessibility recommendations, but it doesn’t address the use of implicit vs. explicit labels that I was referring to:

I believe that all current screen readers now handle implicit labels well, although I would still use a for attribute on the label just to be certain. But unfortunately some voice control software still does not handle them correctly. So to be as inclusive as possible you would want to separate the input from the label.

2 Likes