Aligning radio-buttons and checkboxes?!

Hi, I’ve made them stack on new lines. now the problem I run into is they have not aligned vertically the checkboxes and the radio buttons example :

and my project is here

I’m only reasonably new to this so there may be a more efficient way to code this.

But in my understanding, the label and checkbox are considered one, so as you have it to justify center then it centers the entire line, so you could either justify right and then align the padding and margin to center it.

Or, you could separate the label and the checkbox so they are two separate entities, then you could align the two in the way that you want.

Hope this helps!

Yeah that’s why I posted this question, maybe someone can show me an efficient way to do this, cause I feel like making another separate div for one element is kinda much :sweat_smile:

But if nothing comes up I won’t have a choice.
Styling inputs is so annoying… :smiley:

I’ll say your project could use a lot of styling :slight_smile:
Anyways, on .checkbox-flex, set align-items to flex-end.

Yep it’s still in progress… :smiley: thanks i’ll try

1 Like

It fixes the alignment issue, but i want the content centered … :smiley: so now there is another issue :smiley:

That will be a bit trickier :smiley: you will need a new div :smiley:

Let me play a bit :smiley:

I can’t get it perfect. This is about the best i can do:

1 Like

Thank you for your help, I was fighting it also for a while decided to just leave it at flex-end. Just gonna style it up and wrap it up. Gonna make it better once i will incorporate grids. thank you so much for helping me out. Hopefully i’ll learn better solutions for foms l8r on :smiley:

1 Like

Once you’re done styling notify me and I’ll give feedback :sweat_smile: