如何将面板集中在中间？ [复制]

Posted 2023-03-05

【中文标题】如何将面板集中在中间？ [复制]

【英文标题】：How to centralize a panel in the middle? [duplicate]

【发布时间】：2014-09-22 02:28:14

【问题描述】：

我是第一次学习引导程序。我很难将一个面板集中在页面中间以进行登录。

例子：

<div class="container">
    <div style='width:500px' class="panel panel-default">

        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Login</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputEmail">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-lg btn-primary">Login</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

怎么做？

【问题讨论】：

在中间集中...你能在中间以外集中吗？

【参考方案1】：

这通常通过为 div 指定特定宽度（百分比或固定）以及margin:0 auto; 来实现。

【参考方案2】：

查看修改后的代码>>Middle Panel

<div style='width:500px;margin:0 auto;' class="panel panel-default">

【参考方案3】：

分配

.container  
    width:100%; 


.panel-default
    margin: 0 auto;

margin: 0 auto 可以为 div 设置边距：0 表示顶部和底部，而 auto 表示左右。使用 0，将添加 0px 的边距（根本没有边距）。使用auto，您可以要求浏览器设置自动计算的像素量，因为可以将 div 居中到 div 父级 (.container) 中。要应用auto，div 父级的宽度至少应大于其子级。在这种情况下，要将子 div 居中到页面中心，我们应该将父级的宽度设置为 100%（这意味着其容器的宽度相同（在这种情况下，“.container”的容器应该是 body！）。

【讨论】：

请考虑为这个答案添加解释以改进它:-)

我现在已经添加了解释。对不起，我的英文写作不是最好的，我希望解释清楚！