如何让Checkbox与Input、Button垂直居中对齐？align-center类无效

以下是几种可行的解决方法，基于你使用的Bootstrap框架：

方法1：使用Bootstrap Flex布局类（推荐） #

给包含Checkbox的col-md-3容器添加d-flex align-items-center类，利用Flex布局实现垂直居中：

<div class="col-md-3 d-flex align-items-center">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck" name="isActive" asp-for="@Model.isActive">
        <label class="form-check-label" for="autoSizingCheck">
            Cancel
        </label>
    </div>
</div>

父容器会变为Flex容器，内部的form-check元素会自动垂直居中，和旁边的输入框、按钮对齐。

方法2：微调Checkbox容器的外边距 #

通过给form-check添加自定义外边距，手动匹配输入框的垂直位置：

方式A：使用Bootstrap间距类 #

<div class="col-md-3">
    <div class="form-check mt-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck" name="isActive" asp-for="@Model.isActive">
        <label class="form-check-label" for="autoSizingCheck">
            Cancel
        </label>
    </div>
</div>

mt-2会给容器添加上外边距，可根据实际显示效果调整为mt-1或mt-3。

方式B：自定义CSS样式 #

在样式表中添加：

.form-check.custom-align {
    margin-top: 0.375rem; /* 匹配form-control的padding-top值 */
}

然后给form-check添加类：

<div class="form-check custom-align">
    <!-- 内容不变 -->
</div>

方法3：调整Checkbox的垂直对齐属性 #

直接给form-check-input和标签添加垂直对齐样式：

<input class="form-check-input" type="checkbox" id="autoSizingCheck" name="isActive" asp-for="@Model.isActive" style="vertical-align: middle;">
<label class="form-check-label" for="autoSizingCheck" style="vertical-align: middle;">
    Cancel
</label>

说明 #

你之前尝试的align-center类在Bootstrap中不存在，正确的垂直居中Flex类是align-items-center，且需要应用在父容器上才能生效。

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