计算屏幕高度和居中
计算屏幕高度和居中
提问于 2013-09-25 22:42:56
我正在建立一个新的网站使用Bootstrap和一些Jquery。有没有一种方法可以计算屏幕高度并根据屏幕高度垂直居中div？我不习惯Jquery，但我还是设法做了一些其他的事情，但请温文点:-)
回答 4
Stack Overflow用户
发布于 2013-09-25 22:59:59
对高度和宽度的变化作出反应的函数
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/
Stack Overflow用户
发布于 2013-09-25 22:56:04
您可以使用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 widthStack Overflow用户
发布于 2013-09-25 23:09:55
如果您已经知道元素的高度，那么它只有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 )
});希望这能有所帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19008041
复制相关文章
相似问题
腾讯云开发者
