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

Question

我已经查看了其他垂直对齐的问题和答案，但似乎无法找到有效的答案。我想知道你们中有谁聪明的人知道如何解决我的问题。我有多深入洞里。

您可以在此处查看我的代码：https://github.com/LukeBennettUK/techdegree_project_3

我正在尝试将这些调整在一起。我试过让它们成为flex项目然后添加margin-bottom。但是由于某些原因，下面的项目似乎在上面的项目之间有更大的差距：

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

Answer 1

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

在下面的示例中，我将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

idk你怎么打破它但这是一个解决方案。您的复选框在右侧和底部有15px的边距。把15px全部放在一边，这样就可以了。我下载了你的代码并自己进行了测试。