Question

我有以下表格

<div class="form-group">
<div class="col-xs-10">
    <div class="span7 text-center vcenter">
        <form id="formid" method="get">
            <label for="platform" class="control-label">Enter Code, IMEI or Phone Number:</label><br />
            <input type="text" class="form-control" name="filtername" placeholder="Please Enter Code" />
            <input id="btngo" class="btn btn-success" value="GO" />
        </form>
        @using (Html.BeginForm("Index", "Home", FormMethod.Get))
        {
            <p>
                @Html.TextBox("filtername")
                <input type="submit" class="btn btn-success" value="GO" />
            </p>
        }
    </div>
</div>

和CSS：

.vcenter {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}

我尝试将上面的表单元素垂直居中，以保持页面响应，但我无法在以下任何帖子中获取代码以便为我工作。这让我相信他们的代码与我的代码有所不同，或者我只是简单地做错了。

任何人都可以解释引导中心的方式吗？

我试过一些代码：

...

类=＆＃34;分页为中心＆＃34;

以前的帖子我试过： Twitter Bootstrap 3, vertically center content How to center align vertically the container in bootstrap vertical-align with Bootstrap 3

Answer 1

试试这个fiddle。

我改变了一点css：

.outer {
    display:table;
    height:300px;
    text-align:center;
}
.vcenter {
    display:table-cell;
    vertical-align:middle;
}

CSS：垂直居中的响应式引导程序表单

1 个答案: