表中居中复选框

Question

我正在使用“ MDBootstrap自定义”复选框，并希望在Razor中的每个foreach循环的表单元格中显示该复选框。虽然foreach并不重要，但是我无法使复选框水平居中。正常的Checkbox输入工作正常，但是当我使用引导程序中的自定义Checkbox时，它不再对齐居中。这是我的带有自定义复选框的HTML。

 <td style="text-align:center;padding:0Px; vertical-align:middle;">
      <div class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
             <label class="custom-control-label" for="defaultUnchecked"></label>
      </div>
</td>

这是正常的复选框

<input type="checkbox" >

在以下图片上，您可以同时看到“定制”和“标准”复选框。一个没有警告背景的东西就是我想要居中的那个。

Answer 1

只需为MDBootstrap自定义复选框添加自定义CSS，如下所示：

.custom-control-label::before, .custom-control-label::after {
  left: -1.25rem !important;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.3/css/mdb.min.css" rel="stylesheet">

<table border="1">
    <tr>
        <td style="text-align:center;padding:0Px; vertical-align:middle; width: 50px; height: 50px">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                <label class="custom-control-label" for="defaultUnchecked"></label>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align:center;padding:0Px; vertical-align:middle; width: 50px; height: 50px">
            <input type="checkbox" >
        </td>
    </tr>
</table>