How to vertical-align larger checkbox to middle - html

Question

I will extract the style later. I want to learn how to do this with straight up HTML.
Notice that as long as my checkbox is the default size, all contents inside of my wrap1 div vertical-align in the middle.
If I change the size of the checkbox then the vertical-align appears to stop working. Here is my JSFiddle.
<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left">
<div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;">
<div id="heading" class="row">
<p style="text-align: center;">This is a title</p>
</div>
<div class="wrap1" style="vertical-align: middle;">
<div style="width: 15%; line-height: 53px; text-align: center; background-color: yellow; display: inline-block;">
<input type="checkbox" style="height: 30px; width: 30px;">
</div><div style="width: 70%; line-height: 53px; background-color: orange; display: inline-block;"><label>Description</label>
</div><div style="width: 15%; line-height: 53px; text-align: center; background-color:green; display: inline-block;">
<label>100</label>
</div>
</div>
</div>
</div>

Answer 1

Best approach is to use CSS flexbox to be honest as it will auto justify and align center and vertical:
<style type="text/css">
.main__container {
position: relative;
width: 500px;
height: auto;
}
.main__container .content__list {
position: relative;
list-style: none;
width: 100%;
height: auto;
}
.main__container .content__list .content__col {
position: relative;
height: 60px;
}
.flex-grid {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
flex-wrap: wrap;
}
.flex-row {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-column {
flex-flow: column;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-cell {
flex: 1;
}
.flex-20 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 20%;
-ms-flex: 1 1 20%;
flex: 1 1 20%;
}
.flex-60 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 60%;
-ms-flex: 1 1 60%;
flex: 1 1 60%;
}
.flex-100 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.grid-center {
justify-content: center;
align-items: center;
}
</style>
<main class="main__container flex-grid flex-row flex-wrap grid-center ">
<header class="title__container flex-cell flex-100">
{{--Nav HTML here --}}
</header>
<ul class="content__list flex-grid flex-nowrap flex-column grid-center">
<li class="content__col flex-20 one">
<input type="checkbox" style="height: 30px; width: 30px;">
</li>
<li class="content__col flex-60 two"></li>
<li class="content__col flex-20 there"></li>
</ul>
</main>

Answer 2

You can try a couple of things here: if you want to align your checkbox vertically, you could try styling your checkbox like this:
vertical-align: inherit;
This will give your checkbox the same vertical alignment property of the parent element, and should fix your issue. However, if that option doesn't work, try playing around with the vertical-align: length property. This allows you to adjust alignment via px values, and can take a positive or negative number. This may not be your needed value, but for example:
vertical-align: -10px;