如何居中对齐面板的内容答案

【问题标题】：how to center align contents of panel如何居中对齐面板的内容
【发布时间】：2015-10-02 18:56:59
【问题描述】：

我想集中放置内容（dom 元素），即面板内的标签和下拉菜单。请帮助我。这是我在cshtml中的代码。我想将 Region 下拉菜单的标签和 Region 下拉菜单的标签居中对齐。

@model IEnumerable<HuRIS.Models.Zone>

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div class="panel panel-info">
    <div class="panel-body">
        <div class="form-group">
            <div class="col-md-2"></div>
            <label for="RegionID" class="col-md-1">Region:</label>
            @Html.DropDownList("RegionID", null, htmlAttributes: new { @class = "form-control col-md-7" })
            <div class="col-md-2"></div>
        </div>
    </div>
</div>


<table class="table">

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.devregion.RegionName)

        </th>
        <th>
            @Html.DisplayNameFor(model => model.ZoneCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ZoneName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.isActive)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.devregion.RegionName)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ZoneCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ZoneName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.isActive)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ZoneID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ZoneID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ZoneID })
            </td>
        </tr>
    }

</table>

【问题讨论】：

标签： asp.net-mvc html css razor

【解决方案1】：

试试这个（假设 Bootstrap 3）：

    <div class="form-group center-block">
        <label for="RegionID" class="control-label">Region:</label>
        @Html.DropDownList("RegionID", null, htmlAttributes: new { @class = "form-control" })
    </div>

类似的小提琴http://jsfiddle.net/tzhben/bpqmx8vd/

【讨论】：