1

我正在使用 Bootstrap 和一些 Jquery 构建一个新网站。有没有办法计算屏幕高度并根据屏幕高度垂直居中 div？我不习惯 Jquery，但无论如何我还是做了一些其他的事情，但请温​​柔:-)

4

4 回答 4

1

对高度和宽度变化作出反应的函数

html:

<div id="mydiv1">
   <div id="mydiv2">
       <p>Middle of Middle :)</p>
   </div>
</div>

js jquery

它也可能是编程中的一个功能，但我认为现在是时候更清楚了

function SetWidthAndHeight(getelement) {
    var winH = $(window).height();
    var winW = $(window).width();
    getelement.css('top', winH / 2 - getelement.height() / 2);
    getelement.css('left', winW / 2 - getelement.width() / 2);
}
function SetCenterOfAreDiv(ele,from) {
    var winH = from.height();
    var winW = from.width();
    ele.css('top', winH / 2 - ele.height() / 2);
    ele.css('left', winW / 2 - ele.width() / 2);
}
$(function () {
    // on change orientation
    window.addEventListener("orientationchange", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
    // on change resize
    window.addEventListener("resize", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
});

SetWidthAndHeight($('#mydiv1'));
SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));

css

#mydiv1 {
    height:100px;
    width:80%;
    background-color:green;
    position:absolute;
}
#mydiv2 {
    height:50px;
    width:30%;
    background-color:blue;
    position:absolute;
    text-align:center;
    color:#FFF;
}

这里是现场演示：http: //jsfiddle.net/A7PWR/

于 2013-09-25T14:59:58.530 回答
0

您可以使用 jquery.height()方法来计算窗口高度。

根据窗口高度居中 div 的 Jquery 代码：

    var winH = $(window).height(); //-- For calculate window height 
    var winW = $(window).width(); //-- For calculate window width
    $('#MyDiv').css('top', winH / 2 - $('#MyDiv').height() / 2); //-- For centering div according to window height
    $('#MyDiv').css('left', winW / 2 - $('#MyDiv').width() / 2); //-- For centering div according to window width
于 2013-09-25T14:56:03.520 回答
0

如果您已经知道元素的高度，那么它只是 CSS：

.element {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  background: #FFF;
}

如果您不知道元素的宽度和高度。您可以将它与一些 javascript 结合起来。

var $element = $('.element');

$element.css({
  marginTop: 0 - Math.round( $element.height() / 2 ),
  marginLeft: 0 - Math.round( $element.width() / 2 )
});

希望有帮助:)

于 2013-09-25T15:09:55.043 回答
0

如果您想要做的只是在屏幕中央放置一个 div，那么您不需要 jQuery/JavaScript 来做这件事。改用 CSS。它更好、更快，并且您不会（可能）在动态定位时看到元素的“逐像素”“机器人”运动。这是使用 CSS 的方法：

.centerBox {
  position: absolute;
  width: 300px;
  height: 4000px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -150px;
}

因此，您只需像这样使用它：

...
<div class="centerBox"> bla bla bla </div>
...
于 2013-09-25T15:30:21.340 回答