如何让switch旁的toggle-label文本实现垂直居中？

方法1：利用vertical-align属性快速调整 #

.toggle-label是行内元素，.switch是inline-block元素，默认垂直对齐是基线，导致文字和开关错位。只需要给这两个类添加vertical-align: middle;就能解决：

修改后的CSS代码：

.toggle-label {
  font-weight: bold;
  font-size: 20px;
  vertical-align: middle; /* 添加这行 */
}

.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
  vertical-align: middle; /* 添加这行 */
}

/* 以下原有CSS保持不变 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.switch input:checked+.slider-round {
  background-color: #e53f71;
}

.switch input:focus+.slider-round {
  box-shadow: 0 0 1px #e53f71;
}

.switch input:checked+.slider-round:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

HTML无需修改，直接使用原来的结构即可。

方法2：用Flex布局实现（适配性更强） #

如果后续要调整布局，比如增加更多交互元素，Flex布局会更灵活。把每个标签和开关的组合包裹在容器里，设置容器为Flex布局并垂直居中：

修改后的HTML代码：

<div class="toggle-group">
  <span class="toggle-label">BGM</span>
  <label class="switch">
       <input type="checkbox" id="bgm" checked>
       <span class="slider-round"></span>
  </label>
</div>
<div class="toggle-group">
  <span class="toggle-label">SFX</span>
  <label class="switch">
       <input type="checkbox" id="sfx" checked>
       <span class="slider-round"></span>
  </label>
</div>

新增并修改对应的CSS：

.toggle-group {
  display: flex;
  align-items: center; /* 实现垂直居中 */
  gap: 8px; /* 标签和开关的间距，可按需调整 */
  margin-right: 20px; /* 控制组与组之间的间距 */
}

.toggle-label {
  font-weight: bold;
  font-size: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
}

/* 以下原有CSS保持不变 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.switch input:checked+.slider-round {
  background-color: #e53f71;
}

.switch input:focus+.slider-round {
  box-shadow: 0 0 1px #e53f71;
}

.switch input:checked+.slider-round:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

这种方式不仅解决了垂直对齐问题，还能更方便地管理元素间距和整体布局。

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