html css中的对齐文本和切换按钮
我创建了一个带有html输入复选框和自定义css的自定义切换按钮,如下所示 正如您所看到的,文本和切换按钮没有对齐,我尝试添加边距/填充/高度,但没有任何效果。 下面是html和相应的css->html css中的对齐文本和切换按钮,html,css,checkbox,Html,Css,Checkbox,我创建了一个带有html输入复选框和自定义css的自定义切换按钮,如下所示 正如您所看到的,文本和切换按钮没有对齐,我尝试添加边距/填充/高度,但没有任何效果。 下面是html和相应的css-> <h5 style="display:inline" class="switch">Company</h5> <label class="switch"> <input type="ch
<h5 style="display:inline" class="switch">Company</h5>
<label class="switch">
<input type="checkbox" id="company-survey-checker">
<span class="slider round"></span>
</label>
<h5 style="display:inline">Survey</h5>
公司
调查
在这里运行的css是->
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
.开关{
位置:相对位置;
显示:内联块;
宽度:60px;
高度:34px;
}
.开关输入{
不透明度:0;
宽度:0;
身高:0;
}
.滑块{
位置:绝对位置;
光标:指针;
排名:0;
左:0;
右:0;
底部:0;
背景色:#ccc;
-webkit转换:.4s;
过渡:.4s;
}
.滑块:之前{
位置:绝对位置;
内容:“;
高度:26px;
宽度:26px;
左:4px;
底部:4px;
背景色:白色;
-webkit转换:.4s;
过渡:.4s;
}
输入:选中+滑块{
背景色:#2196F3;
}
输入:焦点+.滑块{
盒影:0 0 1px#2196F3;
}
输入:选中+。滑块:之前{
-webkit转换:translateX(26px);
-ms变换:translateX(26px);
转化:translateX(26px);
}
/*圆形滑块*/
.圆滑{
边界半径:34px;
}
.滑块.圆形:之前{
边界半径:50%;
}
理想情况下,文本和切换按钮应该在同一行上,但我发现很难实现,非常感谢您提供的任何帮助将
垂直对齐:中间
添加到标签上
开关{
位置:相对位置;
显示:内联块;
宽度:60px;
高度:34px;
垂直对齐:中间对齐
}
.开关输入{
不透明度:0;
宽度:0;
身高:0;
}
.滑块{
位置:绝对位置;
光标:指针;
排名:0;
左:0;
右:0;
底部:0;
背景色:#ccc;
-webkit转换:.4s;
过渡:.4s;
}
.滑块:之前{
位置:绝对位置;
内容:“;
高度:26px;
宽度:26px;
左:4px;
底部:4px;
背景色:白色;
-webkit转换:.4s;
过渡:.4s;
}
输入:选中+滑块{
背景色:#2196F3;
}
输入:焦点+.滑块{
盒影:0 0 1px#2196F3;
}
输入:选中+。滑块:之前{
-webkit转换:translateX(26px);
-ms变换:translateX(26px);
转化:translateX(26px);
}
/*圆形滑块*/
.圆滑{
边界半径:34px;
}
.滑块.圆形:之前{
边界半径:50%;
}
公司
调查