Bootstrap列中的垂直对齐项

Question

Hopefully an easy one to solve. See image below, I cant get the toggle switch to align horizontally inline with the bootstrap buttons. I have some suspicions it may be to do with the css of this custom toggle switch. Nothing I've tried within the code on the razor page is having any affect. thx

Razor Page Code:

 <div class="container" style="margin-top: 2em">
<div class="row align-items-center">
    <div class="col-sm">
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
            <label class="onoffswitch-label" for="myonoffswitch">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
    </div>
    <div class="col-sm">
        <button type="button" class="btn btn-secondary">
            Button
            <i class="fas fa-play"></i>
        </button>
    </div>
    <div class="col-sm">
        <button type="button" class="btn btn-secondary">
            Button
            <i class="fas fa-play"></i>
        </button>
    </div>
</div>

Custom CSS for Toggle Switch

.onoffswitch {
position: relative;
width: 70px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.onoffswitch-checkbox {
display: none;
}

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}

.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 24px;
    padding: 0;
    line-height: 20px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
    }

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 5px;
    background-color: #383B40;
    color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 5px;
    background-color: #383B40;
    color: #999999;
    text-align: right;
}

.onoffswitch-switch {
display: block;
width: 30px;
margin: 0px;
background: #FF0000;
position: absolute;
top: 0;
bottom: 0;
right: 40px;
transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #00FF00;
}

Answer 1

you can add to your toggle those two class from bootstrap 4

class="d-flex align-items-center"

you can check more about it here in documentaion

after that edit your .onoffswitch-label from

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}

to

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
margin: 0;
}

Answer 2

You can use css hack for that, look at the below code

html:
<div id="parent">
  <div id="child">Content here</div>
</div>

css:
#parent {display: table}

#child {
  display: table-cell;
  vertical-align: middle;
 }