Survey form : how to align labels and input?

Code Feedback
1

Hello everyone! :space_invader:

I finished the survey form project. It took me a while because I tried to align the text to the left with the input right below but I didn’t know whether to use float or flex.

I also had a hard time with responsiveness and I think I overwhelmed my CSS with too many media queries… :sweat:

My question here is : how can I align the the labels with the input to the middle (vertical)?

How can I align the radio buttons to the left?
They seem to be floating around but with position:absolute I just don’t dare to touch anything… :persevere:

Here is the link to my Codepen
(add codepen url before) CodeCaptina/pen/EMbqOE

If you see anything else that looks off to you, don’t hesitate to tell me!
I’m here to learn :wink:

image
image1465×323 82.7 KB

Screenshot of label misalignmentstrong text

2

I would simply give your parent container .row-container properties of

display: flex;
align-items: center;

It will level them up evenly.

3

And without using flex is that possible ?

4

You can use line-height and height together to center items.

.row {
    line-height: 75px;
    height: 75px;
}

Everything in the row will be centered.

1 Like