垂直对齐div中的复选框

Question

我无法将复选框垂直对齐到div 的中间

我试过

<style>
.branding-below {
bottom: 56px;
top: 0
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid gray 1px!important;
outline: 0
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1
}
20% {
transform: scale(25, 25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40, 40)
}
}
#onoff+label {
display: inline-block;
padding-right: 10px;
margin-left: 45px;
position: relative
}
#onoff {
position: absolute;
left: -9999px
}
#onoff+label::after {
content: '';
border: 2px solid rgba(0, 0, 0, .5);
border-radius: 2px;
position: absolute;
top: 50%;
transform: translate(-20px, -50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255, 0, 0, .4)
}
#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15, 157, 88, .7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}
#onoff:disabled+label::after {
border: 2px solid rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, .05);
background-image: none
}
#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0, 0, 0, .1);
position: absolute;
box-sizing: border-box;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 1.8px;
height: 1.8px
}
#onoff:focus+label::before {
animation: ripple 1s ease-out
}
#onoff+label::after {
left: -10px;
right: auto
}
#onoff+label::before {
left: -20px;
/* here offset updated */
right: auto
}
</style>
<table border="0" width="100%" style="table-layout:fixed;">
<tr>
<td colspan="2">
<div style="align-items: center;height: 75px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
<div style="
display: contents;
">
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Exam</label><br><br>
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Certificate creation</label>
</div>
</div>
</td>
</tr>
</table>

Answer 1

您需要为td的子div添加display: flex; justify-content: center;并删除align-items: center。另外，删除该div元素的子元素的display: contents。

<style>
.branding-below {
bottom: 56px;
top: 0
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid gray 1px!important;
outline: 0
}

@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1
}
20% {
transform: scale(25, 25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40, 40)
}
}

#onoff+label {
display: inline-block;
padding-right: 10px;
margin-left: 45px;
position: relative
}

#onoff {
position: absolute;
left: -9999px
}

#onoff+label::after {
content: '';
border: 2px solid rgba(0, 0, 0, .5);
border-radius: 2px;
position: absolute;
top: 50%;
transform: translate(-20px, -50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255, 0, 0, .4)
}

#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15, 157, 88, .7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}

#onoff:disabled+label::after {
border: 2px solid rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, .05);
background-image: none
}

#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0, 0, 0, .1);
position: absolute;
box-sizing: border-box;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 1.8px;
height: 1.8px
}

#onoff:focus+label::before {
animation: ripple 1s ease-out
}

#onoff+label::after {
left: -10px;
right: auto
}

#onoff+label::before {
left: -20px;
/* here offset updated */
right: auto
}
</style>
<table border="0" width="100%" style="table-layout:fixed;">
<tr>
<td colspan="2">
<div style="display: flex; justify-content: center; flex-direction: column; height: 75px;padding: 0; border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;"> <!-- Add here -->
<div> <!-- remove display css -->
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Exam</label><br><br>
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Certificate creation</label>
</div>
</div>
</td>
</tr>
</table>

Answer 2

我认为这就是您所需要的：

<style>
.branding-below {
bottom: 56px;
top: 0
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid gray 1px!important;
outline: 0
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1
}
20% {
transform: scale(25, 25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40, 40)
}
}
#onoff+label {
display: inline-block;
padding-right: 10px;
margin-left: 45px;
position: relative
}
#onoff {
position: absolute;
left: -9999px
}
#onoff+label::after {
content: '';
border: 2px solid rgba(0, 0, 0, .5);
border-radius: 2px;
position: absolute;
top: 50%;
transform: translate(-20px, -50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255, 0, 0, .4)
}
#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15, 157, 88, .7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}
#onoff:disabled+label::after {
border: 2px solid rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, .05);
background-image: none
}
#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0, 0, 0, .1);
position: absolute;
box-sizing: border-box;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 1.8px;
height: 1.8px
}
#onoff:focus+label::before {
animation: ripple 1s ease-out
}
#onoff+label::after {
left: -10px;
right: auto
}
#onoff+label::before {
left: -20px;
/* here offset updated */
right: auto
}
</style>
<table border="0" width="100%" style="table-layout:fixed;">
<tr>
<td colspan="2">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;height: 75px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
<div style="">
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Exam</label><br><br>
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Certificate creation</label>
</div>
</div>
</td>
</tr>
</table>

Answer 3

vertical-align可以从td本身完成：

可能的例子：

/* update from style removed from HTML */
td {
vertical-align: middle;
height: 100px;/* whatever height you need (alike min-height for td) */
border-radius: 2px;
line-height: 16px;
border: 1px solid;
border-color: #bed9b2;
}
/* end update */

.branding-below {
bottom: 56px;
top: 0
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid gray 1px!important;
outline: 0
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1
}
20% {
transform: scale(25, 25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40, 40)
}
}
#onoff+label {
display: inline-block;
padding-right: 10px;
margin-left: 45px;
position: relative
}
#onoff {
position: absolute;
left: -9999px
}
#onoff+label::after {
content: '';
border: 2px solid rgba(0, 0, 0, .5);
border-radius: 2px;
position: absolute;
top: 50%;
transform: translate(-20px, -50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255, 0, 0, .4)
}
#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15, 157, 88, .7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}
#onoff:disabled+label::after {
border: 2px solid rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, .05);
background-image: none
}
#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0, 0, 0, .1);
position: absolute;
box-sizing: border-box;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 1.8px;
height: 1.8px
}

#onoff:focus+label::before {
animation: ripple 1s ease-out
}
#onoff+label::after {
left: -10px;
right: auto
}
#onoff+label::before {
left: -20px;
/* here offset updated */
right: auto
}

<table border="0" width="100%" style="table-layout:fixed;">
<tr>
<td colspan="2">
<div  >
<div>
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Exam</label><br><br>
<input id="onoff" type="checkbox" style="display:table-column">
<label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON Certificate creation</label>
</div>
</div>
</td>
</tr>
</table>