两个div并排水平对齐问题：切换按钮与文本垂直错位求助

嘿，我来帮你搞定这个垂直对齐的问题！首先先指出你代码里的一个小错误：<p>标签没有正确闭合，你写的 <p id="show_crash_toggle_text" style="font-size:20px;" <b>User</b>&emsp;</p> 里少了一个 >，应该改成 <p id="show_crash_toggle_text" style="font-size:20px;"><b>User</b>&emsp;</p>，这个小疏漏可能也会影响布局的正常渲染。

接下来是核心的垂直对齐问题：你用 float 实现并排布局，但 float 元素的默认垂直对齐是基线对齐，再加上切换按钮的容器是 inline-block 类型，和文本的基线不匹配，就导致了按钮偏高的情况。下面给你两种靠谱的解决方案：

方案一：用Flexbox布局（推荐） #

Flexbox是现代CSS布局的首选方案，能轻松实现元素的水平并排和垂直居中，代码更简洁，维护性也更好。

修改后的完整代码如下：

.switch { 
  position: relative; 
  display: inline-block; 
  width: 47px; 
  height: 25px; 
}
.switch input { display: none; }
.slider { 
  position: absolute; 
  cursor: pointer; 
  top: 0; left: 0; right: 0; bottom: 0; 
  background-color: #ccc; 
  -webkit-transition: .4s; 
  transition: .4s; 
  border-radius: 34px; 
}
.slider:before { 
  position: absolute; 
  content: ""; 
  height: 17px; width: 17px; 
  left: 4px; bottom: 4px; 
  background-color: white; 
  -webkit-transition: .4s; 
  transition: .4s; 
  border-radius: 50%; 
}
input:checked+.slider { background-color: #2196F3; }

<div style="display: flex; align-items: center;">
  <p id="show_crash_toggle_text" style="font-size:20px;"><b>User</b>&emsp;</p>
  <label class="switch">
    <input type="checkbox" onclick="show_crash_log()">
    <span class="slider"></span>
  </label>
</div>
<div style="margin-left:150px; display: flex; align-items: center;">
  <b style="font-size:20px">Search by: </b>
</div>

关键修改点： #

• 把外层的 float:left 换成 display: flex; align-items: center;，容器内的所有子元素会自动垂直居中
• 去掉了多余的嵌套div，简化了整体结构

方案二：修复float布局的垂直对齐 #

如果你坚持使用float布局，可以通过调整 vertical-align 属性来修正对齐问题：

修改后的代码：

<div style="float:left; display: inline-block; vertical-align: middle;">
  <div style="float: left; vertical-align: middle;">
    <p id="show_crash_toggle_text" style="font-size:20px;"><b>User</b>&emsp;</p>
  </div>
  <div style="margin-left: 60px; display: inline-block; vertical-align: middle;">
    <label class="switch">
      <input type="checkbox" onclick = "show_crash_log()">
      <span class="slider"></span>
    </label>
  </div>
</div>
<div style="margin-left:150px; display: inline-block; vertical-align: middle;">
  <b style="font-size:20px">Search by: </b>
</div>

关键修改点： #

• 给包含文本和按钮的容器都加上 display: inline-block; vertical-align: middle;，让它们以中线对齐
• 同样修复了<p>标签的闭合错误

这两种方法都能解决你遇到的垂直对齐问题，推荐用Flexbox方案，它在响应式布局中更灵活，也更容易维护。

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