anyone else encounter this annoying issue?
Whenever it comes to checkboxes, I always run into alignment issues. This is my most recent one. I can't seem to get the checkboxes with their labels to align to the center properly.
Any tips on how to do so would be hugely appreciated!
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox
</title>
<style type="text/css">
.checkbox-grid div {
width:25%;
}
.checkbox-grid {
width:50%;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.center {
display:flex;
justify-content:center;
flex-wrap:wrap;
}
</style>
</head>
<body>
.checkbox-grid div {
width:25%;
}
.checkbox-grid {
width:50%;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.center {
display:flex;
justify-content:center;
flex-wrap:wrap;
}<!DOCTYPE html>
<html>
<head>
<title>
Checkbox
</title>
</head>
<body>
<div class="center">
<div class="checkbox-grid">
<div><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</label></div>
<div><input type="checkbox" name="text2" value="value2" /><label for="text2">Text 2</label></div>
<div><input type="checkbox" name="text3" value="value3" /><label for="text3">Text 3</label></div>
<div><input type="checkbox" name="text4" value="value4" /><label for="text4">Text 4</label></div>
<div><input type="checkbox" name="text5" value="value5" /><label for="text5">Text 5</label></div>
<div><input type="checkbox" name="text6" value="value6" /><label for="text6">Text 6</label></div>
<div><input type="checkbox" name="text7" value="value7" /><label for="text7">Text 7</label></div>
<div><input type="checkbox" name="text8" value="value8" /><label for="text8">Text 8</label></div>
</div>
</div>
<div class="center">
hello
</div>
</body>
</html>Stack told me my post is too much code and not enough of an explanation, but I think it's pretty self explanatory, so I'm just writing some waffle at the bottom, don't mind me.
Aucun commentaire:
Enregistrer un commentaire