如何将文本与设置为display: inline-block的其他div元素对齐

inline-block元素默认的垂直对齐规则为vertical-align: baseline，即元素底部会和父容器的文本基线对齐，三个div高度不一致，基线位置存在差异，因此出现对齐错乱的问题，调整margin无法解决根源的对齐规则问题。

这里提供两种常用的实现方式，可根据业务场景选择：

方案1：调整inline-block的垂直对齐规则 #

给三个设置了display: inline-block的子div统一添加vertical-align: middle属性，即可让三个元素基于中线对齐。
修改后的HTML代码示例：

<div>
  <div style="display: inline-block; vertical-align: middle;"> Male</div>
  <div style="display: inline-block; vertical-align: middle;" class="onoffswitch">
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked="">
      <label class="onoffswitch-label" for="myonoffswitch">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
      </label>
  </div>
  <div style="display: inline-block; vertical-align: middle;"> Female</div>
</div>

如果需要调整对齐基准，也可以将middle替换为top（顶部对齐）、bottom（底部对齐）满足不同需求。

方案2：使用Flex布局（更推荐） #

直接给父容器设置Flex布局规则，不需要额外修改子元素属性，即可实现水平排列下的垂直对齐，同时还能自动解决inline-block默认自带的元素间空格间隙问题。
仅需给父div添加样式即可：

<div style="display: flex; align-items: center; gap: 8px;">
  <div> Male</div>
  <div class="onoffswitch">
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked="">
      <label class="onoffswitch-label" for="myonoffswitch">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
      </label>
  </div>
  <div> Female</div>
</div>

其中align-items: center实现垂直居中对齐，gap属性可以灵活调整三个元素之间的间距。原有开关的CSS代码不需要做任何修改即可正常运行。

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