Help with alignment

HTML-CSS
1

Hello, I would like to know how I could align the

    so the top of it aligns with the top of the label left of it.

    For example,

Age: * Option1
     * Option2    
     * Option3

and so on.

here is my code:

2

Hello! One way to do it without changing your code completely(you should have structured your code another way) you can set your Age and Checkbox labels a class “.box-label2” instead of “.box-label”. Then you apply those styles:

.box-label2{
  align-self: center;
  font-family: Georgia;
  color: blue;
  background-color: white;
  margin-right: 20px;
  margin-bottom:37px;
}
3

Hope this helps!

4

You could perfectly align them all if you included both options and a label into one block. As I said before, to avoid changing your code, you can only do your task by repeating the code( that is not good though)

5

Yeah that sounds like a better idea actually. If I understand correctly your suggestion is to put both elements in ‘box1’ instead of having a ‘box2’ aswell?

Thanks for the help!

6

Yes, but make sure to set appropriate widths and margins for those blocks to avoid additional styles! :wink::+1:

7

Thank you! :slight_smile: I think I got it now, have a good day!

1 Like