时间戳

首页 > 解决方案 > Bootstrap 列中的垂直对齐项目

html - Bootstrap 列中的垂直对齐项目

问题描述

希望一个容易解决的问题。见下图，我无法让切换开关与引导按钮水平对齐。我怀疑这可能与此自定义切换开关的 CSS 有关。我在剃须刀页面上的代码中尝试过的任何操作都没有任何影响。谢谢

剃刀页面代码：

 <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>

切换开关的自定义 CSS

.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;
}

标签： htmlcssbootstrap-4

解决方案

你可以使用 css hack，看看下面的代码

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

css:
#parent {display: table}

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

推荐阅读