如何对齐复选框

Question

这是我的代码。我希望这两个复选框在一起，但也要对齐。目前，当代码运行时，复选框一直显示在屏幕左侧，而且似乎不想居中，即使我使用justify-content:centre也是如此。

请帮忙，谢谢！

<input name="change" type="checkbox" value="Borrow Time">Borrow Time</label>
<label><input name="change" type="checkbox" value="No Cigs">No Cigs </label>
label{
display: inline-block;
width: 180px;
}

Answer 1

这是您所期望的吗？

.flex-container {
display: flex;
justify-content: center;
}
.inner-flex-container {
display: flex;
flex-direction: column;
}

<div class="flex-container">
<div class="inner-flex-container">
<label>
<input name="change" type="checkbox" value="Borrow Time">Borrow Time</label>
<label>
<input name="change" type="checkbox" value="No Cigs">No Cigs
</label>
</div>
</div>

解释

justify-content: center;仅适用于flex box，您必须在同一元素上使用display: flex才能使用justify-content: center;

如果你观察了上面的例子，我将label和checkbox封装在两个div中，因为一个是水平居中，另一个是在彼此之上。

我可以用一个div来完成，但如果您的内容/子项的长度不相同，那么它看起来就像下面的例子

.flex-container {
display: flex;
flex-direction: column;
align-items: center;
}

<div class="flex-container">
<label>
<input name="change" type="checkbox" value="Borrow Time">Borrow Time</label>
<label>
<input name="change" type="checkbox" value="No Cigs">No Cigs
</label>
</div>

注意：如果使用flex-direction: column，则align-items用于水平居中，而不是justify-content，因为您已将默认方向row更改为column

Answer 2

使用如下代码片段：

.flex-container {
display: flex;
flex-direction: column;
align-items: center;
}
label {
display: inline-block;
width: 123px;
}
<div class="flex-container">
<label>
<input 
name="change"
type="checkbox"
value="Borrow Time">Borrow Time</label>
<label>
<input 
name="change"
type="checkbox"
value="No Cigs">No Cigs 
</label>
</div>