问题:
我对 CSS 有点生疏,所以这可能是一个简单的问题。
这是我页面相关部分目前的样子。
我已经尽可能地提取代码以在 JSFiddle 中复制它。
https://jsfiddle.net/srap5maw/
我摆弄过它,并尝试了我的 Google-foo,但找不到任何明显的东西。
代码片段:
<div class="centering-table">
<div class="centering-row">
<div class="centering-element">
<b>Yes</b>
</div>
<div class="centering-element">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
<div class="centering-element">
<b>No</b>
</div>
</div>
</div>
最佳答案
您需要将开关更改为 block
(而不是inline-block
),然后将vertical-align:middle
添加到.centering-element
.我还从 .centering-element
中删除了行高:
* {
padding: 0;
margin: 0;
outline: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
font-family: Arial;
font-weight: 400;
font-size: 20px;
line-height: 28px;
}
.centering-table {
margin-top: 20px;
font-size: 26px;
display: table;
margin: 0 auto;
}
.centering-row {
display: table-row;
}
.centering-element {
display: table-cell;
vertical-align:middle;
}
.centering-element b {
font-weight: 600;
}
.switch-container {
position: relative;
}
.switch input {
display: none;
}
.switch {
position: relative;
display: block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border: 1px solid rgba(211,211,211, .8);
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #73c82b;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round:before {
border-radius: 50%;
}
<div class="centering-table">
<div class="centering-row">
<div class="centering-element">
<b>Yes</b>
</div>
<div class="centering-element">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
<div class="centering-element">
<b>No</b>
</div>
</div>
</div>
关于html - 我怎样才能正确地垂直对齐这些文本片段在开关切换器旁边的中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44493949/