Question

我正在尝试将井位置于页面中心。 SO上有类似的问题，但代码与我的有些不同。我的HTML如下：

        <div class="container">
            <div class="row">
                <div class="well col-sm-4" align="center">
                    <div class="text-center">
                        <p><h2>Login</h2></p>
                    </div>
                    <hr>
                    <form role="form">
                        <div class="form-group text-center">   
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username">
                        </div>
                        <div class="form-group text-center">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                        <hr>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-warning">Forgot password</button>
                        </div>
                        <hr>
                        <div class="text-center">
                            <p>Don't have an account yet? <a>Create one now</a></p>
                        </div>
                     </form>   
                </div>
            </div>
        </div>

我尝试使用col-md-12和其他值将well div放在另一个div中，但是井没有居中。有谁知道我怎么能在页面中心井？

Answer 1

您可以尝试offsetting columns

为您的专栏提供课程col-sm-offset-4

像这样：<div class="well col-sm-offset-4 col-sm-4">

示例：http://jsfiddle.net/u48v34p7/

Answer 2

<div class="container">
            <div class="row">
                <div class="col-sm-4 well col-sm-offset-4" align="center">
                    <div class="text-center">
                        <p><h2>Login</h2></p>
                    </div>
                    <hr>
                    <form role="form">
                        <div class="form-group text-center">   
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username">
                        </div>
                        <div class="form-group text-center">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                        <hr>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-warning">Forgot password</button>
                        </div>
                        <hr>
                        <div class="text-center">
                            <p>Don't have an account yet? <a>Create one now</a></p>
                        </div>
                     </form>   
                </div>
            </div>
        </div>

Answer 3

只需在此处替换您的代码：

 <div class="well col-sm-4" align="center">

有了这个（你也可以在CSS类中隔离样式）：

<div class="well col-sm-4" style="margin:auto; float:none;">

Answer 4

你可以放两个假div来使你的中心。我注意到你只有一个col-sm-4

试试这个：

<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>

通过这种方式，您可以让well居中。

你也可以这样做

<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>

使您的桌面视图以1280px及以上为中心。

无法很好地定位到中心

4 个答案: