HTML/CSS中自定义Toggle Button与文本对齐问题求助

我刚看了你的代码，问题其实出在类名的重复使用和垂直对齐属性的缺失上，咱们一步步来修复：

问题根源 #

你给<h5>和<label>都加了.switch类，但这个类是专门为toggle按钮容器设计的——它设置了固定的width:60px、height:34px和position:relative，这会让你的<h5>文本也被强制变成这个尺寸，自然没法和按钮正常对齐。另外，inline/inline-block元素默认的垂直对齐方式可能不是你想要的居中，这也是导致错位的原因。

修复步骤 #

1. 修正HTML结构

先把<h5>上的.switch类去掉，只给toggle按钮的<label>保留这个类：

<h5 style="display:inline">Company</h5>
<label class="switch">
  <input type="checkbox" id="company-survey-checker">
  <span class="slider round"></span>
</label>
<h5 style="display:inline">Survey</h5>

2. 添加垂直对齐样式

在你的CSS里，给.switch类和<h5>元素加上vertical-align: middle，确保它们在同一行垂直居中：

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  vertical-align: middle; /* 新增：垂直居中对齐 */
  margin: 0 8px; /* 可选：给按钮和文本之间加一点间距 */
}

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

/* 给h5添加垂直对齐 */
h5 {
  vertical-align: middle;
  margin: 0; /* 可选：去掉h5默认的margin，避免额外间距 */
}
</style>

效果说明 #

这样修改后，<h5>文本和toggle按钮会以垂直居中的方式排列在同一行。我还加了margin: 0 8px给按钮，让它和前后文本之间有合适的间距，你可以根据自己的需求调整这个值。

内容的提问来源于stack exchange，提问作者Achy97