垂直对齐单选和复选框按钮标签和输入元素

Question

我查看了其他垂直对齐问题和答案，但似乎找不到有效的答案。我想知道你们中是否有聪明人知道如何解决我的问题。以及我可能进入了多深的洞。

你可以在这里查看我的代码：https://github.com/LukeBennettUK/techdegree_project_3

我正在尝试将这些对齐。我试过让它们成为弹性项目，然后添加底部边距。但是由于某种原因，底部的项目似乎在上面的项目之间有更大的边距，如下所示：

我知道非常挑剔。但我只是希望它们都正确对齐。谢谢。

Answer 1

Flexbox 很神奇，它会改变你的生活。过去一年我没有在我的代码中使用浮点数，我很喜欢它！哈哈

在下面的示例中，我将 flex 应用于包含输入和标签的父容器。 justify-content 将所有内容向左对齐，而 align-items 将所有子元素完美居中。

这里有一个很好的资源，可以教你使用 flex 构建的所有很酷的布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ul{
  list-style-type:none;
}

.newsletter-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

<ul>
  <li class="newsletter-row">
     <input type="checkbox" id="css_nl" value="css" name="css_news">
     <label for="css_nl">CSS News</label>
  </li>
</ul>

Answer 2

知道你是如何破坏它的，但这里有一个解决方案。您的复选框在右侧和底部有 15 像素的边距。把 15px 放在周围，这样就可以了。我下载了您的代码并自己进行了测试。