Question

这是我的页面链接：http://poltr.com/action/#alle 当我们点击KONTAKT NU时，会出现一个基于引导程序的模型，它会使用查询进行居中，但是当我们重新调整窗口大小时，它会停在中心位置！有没有办法将它集中在使用SINGLE CSS的所有设备上!!

我将它用于更大的屏幕以使其居中

.modal {
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 5%;
    right: 0;
    bottom: 0;
    left: 42%;
    z-index: 1050;
    outline: 0;
}

我应该使用什么CSS来使其集中在所有设备上？

Answer 1

您可以在窗口调整大小事件上使用jQuery。它有点像这样：

$( window ).resize(function() {
    //execute centering code here  
});

使用css会更好。试试这个：

.modal {
    overflow: auto;
    overflow-y: scroll;
    position: relative;
    top: 5%;
    left: auto;
    right: auto;
    margin: auto;
    width: 75%;
    max-width: 75%;
    z-index: 1050;
    outline: 0;
}

我基本上是这样做的。 .modal div居中，但您必须修改.modal元素中看起来不正确的内容。这是因为您在.col-sm-4内使用了.modal类。我建议不要使用它。

Answer 2

由于您的模型框宽度为300，请使用以下代码。它将盒子送到中间。然后将宽度的一半移回左侧。

.modal{
    left: 50%;
    margin-left: -150px;
}

Answer 3

更新代码：

删除 -

来自col-md-4的
div并指定width和margin 0 auto;
来自top的
left和.modal而不是添加overflow:hidden

添加++
overflow:hidden
中的
.modal-body

如何使用单个CSS在所有设备上居中表单

3 个答案: