javascript - 并排和水平对齐两个div

Question

我正在尝试对齐两个 <div>并排放置，并将它们对齐在同一行。一个包含一个复选框，该复选框使用 CSS 更改为切换按钮，另一个包含纯文本。问题是当我试图让它们并排放置时，它们的内容没有正确垂直对齐。切换按钮高于第二个 <div> 中的文本.

这是我的代码:

.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="float:left;">
  <div style="float: left;">
    <p id="show_crash_toggle_text" style="font-size:20px;" <b>User</b>&emsp;</p>
  </div>
  <div style="margin-left: 60px;">
    <label class="switch">
          <input type="checkbox" onclick = "show_crash_log()">
          <span class="slider"></span>
        </label>
  </div>
</div>
<div style="margin-left:150px;">
  <b style="font-size:20px">Search by: </b>
</div>

这里有一些显示问题的图像。

Answer 1

如果你使用 flexbox，你可以使用 align-items: center，来水平对齐 div。

.flex-container {
  display:flex;
  align-items: center;
}

.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 class="flex-container">
    <p id="show_crash_toggle_text" style="font-size:20px;"><b>User</b></p>
  <div>
    <label class="switch">
      <input type="checkbox" onclick = "">
      <span class="slider"></span>
    </label>
  </div>
<b style="font-size:20px">Search by: </b>
</div>