# Aligning radio-buttons and checkboxes?! **URL:** \ **Category:** General\ **Created:** [September 14, 2019, 11:54am UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391 "2019-09-14T11:54:51Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![teinted123](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teinted123/32/121295_2.png) [@teinted123](https://forum.freecodecamp.org/u/teinted123)\ **Post date:** [September 14, 2019, 11:54am UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/1 "2019-09-14T11:54:51Z")
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 : ![code0007](https://global.discourse-cdn.com/freecodecamp/original/3X/5/e/5e60cab99b3811ea8b991ebfedbef0d210a8c4a2.jpeg) and my project is [here](https://codepen.io/teinted-the-bashful/pen/BaBVxzL?editors=1100) ---
**Author:** ![The\_highlander93](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/the_highlander93/32/123804_2.png) [@The\_highlander93](https://forum.freecodecamp.org/u/The_highlander93)\ **Post date:** [September 14, 2019, 12:38pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/2 "2019-09-14T12:38:43Z")
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! ---
**Author:** ![teinted123](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teinted123/32/121295_2.png) [@teinted123](https://forum.freecodecamp.org/u/teinted123)\ **Post date:** [September 14, 2019, 12:41pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/3 "2019-09-14T12:41:29Z")
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 😅 But if nothing comes up I won’t have a choice. Styling inputs is so annoying… 😃 ---
**Author:** ![Steffan153](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/steffan153/32/119621_2.png) [@Steffan153](https://forum.freecodecamp.org/u/Steffan153)\ **Post date:** [September 14, 2019, 12:45pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/4 "2019-09-14T12:45:11Z")
I’ll say your project could use a lot of styling 🙂 Anyways, on `.checkbox-flex`, set `align-items` to `flex-end`. ---
**Author:** ![teinted123](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teinted123/32/121295_2.png) [@teinted123](https://forum.freecodecamp.org/u/teinted123)\ **Post date:** [September 14, 2019, 12:45pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/5 "2019-09-14T12:45:59Z")
Yep it’s still in progress… 😃 thanks i’ll try ---
**Author:** ![teinted123](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teinted123/32/121295_2.png) [@teinted123](https://forum.freecodecamp.org/u/teinted123)\ **Post date:** [September 14, 2019, 12:51pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/6 "2019-09-14T12:51:30Z")
It fixes the alignment issue, but i want the content centered … 😃 so now there is another issue 😃 ---
**Author:** ![Steffan153](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/steffan153/32/119621_2.png) [@Steffan153](https://forum.freecodecamp.org/u/Steffan153)\ **Post date:** [September 14, 2019, 2:00pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/7 "2019-09-14T14:00:05Z")
That will be a bit trickier 😃 you will need a new div 😃 Let me play a bit 😃 ---
**Author:** ![Steffan153](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/steffan153/32/119621_2.png) [@Steffan153](https://forum.freecodecamp.org/u/Steffan153)\ **Post date:** [September 14, 2019, 2:03pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/8 "2019-09-14T14:03:53Z")
I can’t get it perfect. This is about the best i can do: [https://codepen.io/phpdude/pen/xxKJwBz?editors=1100](https://codepen.io/phpdude/pen/xxKJwBz?editors=1100) ---
**Author:** ![teinted123](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teinted123/32/121295_2.png) [@teinted123](https://forum.freecodecamp.org/u/teinted123)\ **Post date:** [September 14, 2019, 2:06pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/9 "2019-09-14T14:06:00Z")
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 😃 ---
**Author:** ![Steffan153](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/steffan153/32/119621_2.png) [@Steffan153](https://forum.freecodecamp.org/u/Steffan153)\ **Post date:** [September 14, 2019, 2:09pm UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/10 "2019-09-14T14:09:20Z")
Once you’re done styling notify me and I’ll give feedback 😅 ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [January 17, 2021, 9:28am UTC](https://forum.freecodecamp.org/t/aligning-radio-buttons-and-checkboxes/314391/11 "2021-01-17T09:28:19Z")