Hi!
I’m current’y doing the survey form project, but I’m struggling to get the label and input to correctly position themselves when they are centered along the x-axis.
imgur.com/a/lfVCvxF
The first picture is the layout I would like my label and input to be like and the second picture is the current layout of my form.
Here is my code: codepen.io/anon/pen/daMMQB
Excuse my english.
Trouble with English is no problem.
But I think you mean the y-axis, the one that runs up and down.
The way I usually handle this is to have two divs, one on the left, and one on the right. The labels are in the left div and are justified right, and the data is in the right div and are justified left (usually with flexbox). I usually do that for each of the sections of the form and then if I also want the data in the different sections to line up, I can make sure they are all the same widths for their corresponding left and right divs.
Does that make sense?
There are a few ways. I personally would probably look at a flex/grid solution. But, you could also just set relative padding on each element, like
<div>
<label id="number-label" for="age">* Age:</label>
<input name="age" id="number" type="number" placeholder="Age" min="1" max="125" style="padding-right:7.5em" required>
</div>
That’s an example of how to move the “age” to where you want it.
That’s the example inline styling. You could also do it in css class with
.role-padding {
padding-right:3.2em;
}
and add to “select” class=“role-padding”
<select name="role" id="dropdown" class="role-padding">
That would work but you’ll need to set each one.
I think you could do it with flex as well but, it would take me a bit to write the code for that, since I’m very new.
Here- look at age and select. 2 different ways.
Yeah the y-axis sorry for that.
I think I understand, I would have to wrap the label with a left div and the data in a right div and assign the same width to both div to enable them to center along the y-axis?
Is it required to wrap the left div and the right div with the data inside of another div?
Is it required to wrap the left div and the right div with the data inside of another div?
If you want, whatever works best. I probably would do that if there were going to be different sections of the page.
Thank you for the suggestion, but when the padding-right is added, it made the inside of the input length/width expand weirdly to the right side.
I see.
Thank you very much. I will go try it out!
Now that I think about it, since I use flexbox a lot, I probably would wrap those two divs in a div so I could give them a flex-direction of row.
That’s what I was thinking too but, wasn’t sure how to say it, since I haven’t had much time to play with it yet. But, I knew that was the best responsive solution.
It worked out! Thank you very much again. I hope you dont’ mind me asking another question.
I would like to changed the layout to column once the form reach mobile size. Since these two element (lable and input) is wrapped in a div with flexbox, do I simply just add a media query and changed the flex-direction to column or would I have to use another form a CSS postition techniques?
There is another solution where kevin suggested wrapping the label and input element in a seperated div and set the same width to them. which worked out for me.
Thank you for your suggestion! I wish you the best along the coding journey 
Yes, you would have to use a media query to change the CSS to what you want. Things like this are difficult until you get use to them, but they are also the kinds of things that impress future employers.
That’s who I was responding to, when I said flex was the better solution. If done correctly, it can be done with padding but, Flex takes care of the heavy lifting, if you use it.
Good luck!