MVC 中 Table 中其标签上的中心复选框

Question

在我的项目中，我正在处理一些只有几个字段的索引视图。当 table 中的字段很少时，标签和它们下面的复选框永远不会对齐。例如，在下面的代码中，活动字段是一个复选框，它不在其标签下。我怎样才能使复选框位于其标签的中心？

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.BranchName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Active)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model.OrderByDescending(m => m.Active).ThenBy(m => m.BranchName))
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.BranchName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Active)
        </td>
        <td>
            @Html.ActionLink("Edit", "EditBranch", new { id=item.BranchId })
        </td>
    </tr>
}

</table>

这是一张图片，看看它看起来有多丑：

Answer 1

将 css 添加到列中，通过 colspan 或直接在 td 或 th

<td style="text-align: center">

或

style="float:left"

否则将 @Html.DisplayFor 封装在具有该样式的 div 中。

最终没有 css 内联并移动到 style.css 文件。

MVC 中 Table 中其标签上的中心复选框

Center Checkbox on its label in a Table in MVC

c#

checkbox

asp.net-mvc

view