Question

您好，我已经创建了登录表单，需要将该框显示在任何屏幕的中心。在任何屏幕的所有侧面上的间隙都应相等。尝试使用位置：绝对显示柔性但不能正常工作。

db.getCollection('collection_name').find({$or:[{"some_field":{$lte:50}},{"some_field":{$gte:100}}]})

Style.css

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-heading">
            <h2 class="text-center"><img src="images/logo.png"></h2>
        </div>
        <hr />
        <div class="modal-body">
            <form action="" role="form">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" class="form-control" placeholder="User Name" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                        </span>
                        <input type="password" class="form-control" placeholder="Password" />

                    </div>

                </div>

                <div class="form-group text-center">
                    <button type="submit" class="btn btn-success btn-lg">Login</button>
                    <a href="#" class="btn btn-link">forget Password</a>
                </div>

            </form>
        </div>
    </div>
</div>

Answer 1

.modal-dialog{
position:absolute;
left:50%;
width:400px;
top:50%;
transform:translate(-50% , -50%)
}

添加它，它应该可以工作！

Answer 2

使用<center>标签：

<center><div class="modal-dialog">...</div></center>

Answer 3

您可以通过模态对话框中的显示块，边距自动和文本对齐来实现

.modal-content{
        background-color: #fff;
    }
    .btn-link{
        color:white;
    }
    .modal-heading h2{
        color:#ffffff;
    }
    
    .modal-dialog {
      width:400px;
    display: block;
    margin: 0px auto;
    text-align:center;
}

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-heading">
            <h2 class="text-center"><img src="images/logo.png"></h2>
        </div>
        <hr />
        <div class="modal-body">
            <form action="" role="form">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" class="form-control" placeholder="User Name" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                        </span>
                        <input type="password" class="form-control" placeholder="Password" />

                    </div>

                </div>

                <div class="form-group text-center">
                    <button type="submit" class="btn btn-success btn-lg">Login</button>
                    <a href="#" class="btn btn-link">forget Password</a>
                </div>

            </form>
        </div>
    </div>
</div>

将模式内容框与任何屏幕的中心对齐

3 个答案: