将 Bootstrap 表单控件居中到浏览器的中心答案

【问题标题】：Center Bootstrap form-control to center of browser将 Bootstrap 表单控件居中到浏览器的中心
【发布时间】：2016-10-29 07:08:00
【问题描述】：

我试图将表单控件置于我网站的中心，但由于某种原因，CSS 不适用于表单控件，但它适用于 div 中的所有其他内容...

这是我的 HTML：

<div id="search">
    <h2 style="color:deepskyblue">Enter battle-tag</h2>
    <div class="row">
        <div class="col-md-12">
            @using (Html.BeginForm())
            {
                @Html.TextBox("profileId", null, new { @class = "form-control" }); <br />
                    <p style="color:red">Replace the "#" in your battle-tag with an "-"</p>
                    <p style="color:red"> Search is Case-Sensitive </p>
                    <button class="btn btn-primary" type="submit"> Find Player </button>
            }
        </div>
    </div>
</div>

这是我的 CSS：

body {
    height: 100%;
    width: 100%;
}


.body-content {
    padding-left: 15px;
    padding-right: 15px;
}


.dl-horizontal dt {
    white-space: normal;
}


input,
select,
textarea {
    max-width: 280px;
}

#search{
    text-align:center;
    margin-top:10%;
    margin-left:10%;
}

显然 Bootstrap.css 是默认的，我根本没碰过。

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap form-control

【解决方案1】：

您可以通过将元素呈现为 inline-block 来居中，并将父级的 text-align 属性设置为居中。

<div style="text-align:center;">
    <div style="display:inline-block;">This should be in the middle</div>
</div>

【讨论】：