Hello! I am trying to center align my input checkboxes and their labels in the id=“type-list” element.
CodePen:
I’ve tried justify-items and justify-self, but those didn’t change anything. Maybe I set up my grid wrong?
I also tried “text-align: center” but that didn’t change anything either. Neither did “vertical-align: middle”.
I am out of ideas lol any help is appreciated, thanks! 
Wow! This is amazing! I love the page 
Sidestuff
I guess you pasted over on codepen.io just to share your issue, but a step further would be to remove all the head, body, and html tags, and put it all in the right place. Which one? In codepen, you’ll see a 
icon, press there, and you’ll find your way out.
That being said, HTML and CSS analyzers return no errors, which is great.
Did you try adding:
place-items:center;
on your id selector?
A few extra ideas:
That’s it…
Thank you so much for your response
I did just copy and paste into CodePen to share it. Normally, I am using VS Code.
I tried place-items: center but all I got was this:
Both the checkbox and label centered in that element. I’m not sure why 
And thank you for the extra ideas!! I learned to start with mobile first after I got this far 
I am definitely going to try that on my next project!
I love the idea to have the button border color changed when clicked! I will keep that in mind and try it out. 
And I will definitely ask you for help! Do you have to use JavaScript to do it? I haven’t gotten that far yet, but I would love to try it still. I’ve just been mainly working on HTML/CSS.
Uhmm not sure I get what you are looking for.
Is something like this?
(Sorry I removed the text from a node)
If it is, I’ll pass you the changes I’ve made…
I’m not 100% sure how to achieve that of the images 
Not so important now, but this is the way the input’s should be used:
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
It’s not difficult to get confused, and do this instead:
<label for="female">Female
<input type="radio" name="gender" id="female" value="female">
</label> <!-- <-- label shouldnt be there, just wraps the label -->
To answer your prev. question. I’m afraid it can’t be done in css. We can not target a parent (or an uncle on this case).
input[type=radio]:checked + img{ }
targets an image coming after an radio-input (checked) .
You can play and move the image right after the input, and the style will work. But will break your current layout (and is not a good practice, so maybe leave it for now).
This make it an excellent use case for javascript, where you target each element, and do things at your pleasure. So you might go back to it in some weeks.
The grid can only affect its direct children (the elements with the .type-buttons class). You can use justify-content and align-items on the labels and given them 100% height as well.
.label-t {
display: flex;
font-size: 1.5rem;
justify-content: center;
align-items: center;
height: 100%;
}
@anon10002461 Not sure what you mean by the input/label comment, but it is perfectly valid to nest inputs inside labels. In fact, it is often the prefered way of doing it even if/when the label has a matching for attribute.
Thank you so much! This explained a lot. Very helpful. I added padding-top: 12% to vertically center the checkboxes and labels inside the colored sections a bit more. Is this a valid and responsive way of doing it? If it is, I can’t believe I didn’t think of it earlier… I was trying to figure it out for hours! 
It is valid, you can use % if you want to. Usually, if you just need to move an element a little bit in some direction px values can work just fine as well.
However, the way you are setting the height on .type-buttons is not really going to work. If the viewport is made very short in height the elements are going to be too small to contain the content and the content will just overflow. I’m not really sure I see the benefit of setting the height using the vh unit for those elements.
I mean something very simple, and this is that an input is not a label.
It seems to be valid, yes. I doubt that is good for SR, I will test it.
Also, I’ve shown the solution on the image, so you could probably wait to answer. Anyways, i don’t care. And, by the way, can be achieved with this 2 lines:
display:grid;
place-items:center;
I just thought the OP was trying to center the grid, not the icons at first.
Okay I see. I didn’t know this, thank you for pointing it out. I will fix that.
I read about the different units available for CSS and I think it just made me overthink and overcomplicate things I’m never sure what are the best units for different cases.
I still don’t know what you mean. It is a super common way of doing label/input paring. You will see it done like that in the specs (and it is shown as an option in all the MDN docs).
Not true, that’s mostly when the for label isn’t there.
There are a lot of different units and it can be quite overwhelming, I’m not surprised you find it confusing. Different units can accomplish the same task as well, so often it is the context they are used in that will determine what the best unit to use is.
I really do not want to hijack this thread to debate about the correct use of labels and inputs.
I was just trying to make sure the OP didn’t get the wrong idea about the validity of nesting inputs inside labels. I will say, even when an explicit paring has been made using for/id there can still be benefits to nesting the input inside the label and it is most definitely never wrong to do so, even with an explicit pairing of elements.
display: flex;
justify-content: center;
align-items: center;
The issue is default margin and padding which is being applied by the browser and also box-sizing.
You can use the code below, but then you’ll have to apply desired padding and margins to all the necessary elements:
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
Note: This code reset default margin & padding for all HTML elements