如何实现div内checkbox复选框与相邻label元素垂直居中对齐

你遇到的对齐问题是因为行内元素默认采用基线对齐规则，你设置了checkbox宽度为30px，默认对齐方式会让label文字和checkbox的底部基线对齐，所以无法实现居中。下面是三种可行的解决方案：

方案1：Flex布局（最推荐，兼容性好、逻辑简单） #

直接给外层div添加flex相关的对齐属性即可，修改后的代码如下：

<div style="margin-bottom: 15px; display: flex; align-items: center;">
  <input
    id="newsletterRegister"
    type="checkbox"
    name="newsletterRegister"
    style="width: 30px"
  />
  <label for="newsletterRegister">
    Do you want to receive email promotions?
  </label>
</div>

display: flex会将容器内元素转为弹性项，align-items: center会让所有子项在垂直方向上居中对齐，不需要额外修改子元素的样式。

方案2：vertical-align 对齐（适合不想改动父容器布局的场景） #

给input和label都添加vertical-align: middle属性，修改后代码如下：

<div style="margin-bottom: 15px;">
  <input
    id="newsletterRegister"
    type="checkbox"
    name="newsletterRegister"
    style="width: 30px; vertical-align: middle;"
  />
  <label for="newsletterRegister" style="vertical-align: middle;">
    Do you want to receive email promotions?
  </label>
</div>

行内块元素默认是基线对齐，vertical-align: middle可以让两者基于中线对齐。

方案3：行高对齐（适合需要兼容低版本浏览器的场景） #

给父容器设置固定行高，子元素继承行高即可实现对齐：

<div style="margin-bottom: 15px; line-height: 30px;">
  <input
    id="newsletterRegister"
    type="checkbox"
    name="newsletterRegister"
    style="width: 30px; height: 30px; line-height: 30px;"
  />
  <label for="newsletterRegister">
    Do you want to receive email promotions?
  </label>
</div>

注意这里的行高要和checkbox的高度保持一致。

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