将中心中的自定义复选框与Flexbox对齐

Question

一个朋友给了我一些带有自定义复选框的待办事项列表的代码，我一直在努力使用Flexbox（使用bootstrap类）将“自定义复选框”与待办事项列表文本居中对齐。可以在这里看到：

这是带有代码的电笔： https://codepen.io/tanner-brandt/pen/vYGvRee

当文本占据多行时，我一直试图将复选框项child对齐到中心，但是复选框位于顶部。同时，我的删除按钮（位于文本右侧的X按钮）似乎响应正确。谁能帮我发现问题？

Answer 1

您无法执行此操作，因为您的输入复选框具有position: absolute;。在您的情况下，最简单的方法是使用css放置复选框，如下所示：

.form-check .form-check-label input[type="checkbox"]+.input-helper:before, 
.form-check .form-check-label input[type="checkbox"]+.input-helper:after {
  top: calc(50% - 9px);
} 

请注意，您输入的是height: 18px;，因此，当您添加top: 50%;时，还需要将上限值减少元素高度的一半...