即使在窗口重新调整大小后（对于响应式设计），中心绝对定位DIV [英] Centering absolute positioned DIV even after window re-size (for responsive design)
问题描述
我想在屏幕中间保留一个绝对定位的DIV #box ，即使在窗口重新调整大小和所有主要设备（响应式设计）之后。响应#box是使用css3媒体查询完成的，而 left 是使用jquery计算的。但我可以把我的盒子正好在中心，在窗口大小为小屏幕有不等的左和
I want to keep an absolute positioned DIV #box at the middle of the screen even after window re-size and for all major device (responsive design). Responsive #box is done using css3 media queries while left is calculated using jquery. But I can positioned my box exactly at the center, on window re-size for small screen there is unequal left & right margins.
<HTML>
<body>
<div id ="box">
<a> is am athe centre?'</a>
</div>
</body>
</HTML>
css：
#box {
position:absolute;
background:red;
width:900px;
height:400px;
}
@media only screen and (min-width: 979px)
{
#box{width:760px;background:yellow;}
}
@media only screen and (min-width: 768px) and (max-width: 979px)
{
#box{width:760px;background:pink;}
}
@media only screen and (min-width: 480px) and (max-width: 767px)
{
#box{width:460px;background:black;}
}
@media only screen and (min-width: 321px) and (max-width: 479px)
{
#box{width:300px;background:blue;}
}
@media only screen and (max-width: 320px)
{
#box{width:300px;background:grey;}
}
jQuery：
function leftmargin(){
var w_box = ($('#box').width());
var w_window = $(window).width();
var w_left = (w_window - w_box)/2 ;
$("#box").css("left", w_left + "px");
}
$(window).resize(function() {
leftmargin();
});
$(document).ready(function() {
leftmargin();
});
推荐答案
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/rel =nofollow>来源），然后适应媒体查询中的 width 和 margin-left ：
Center the box using CSS (source), then adapt the width and the margin-left in you media queries:
#box {
position:absolute;
border:1px solid red;
width:760px;
height:30px;
background:yellow;
left: 50%;
margin-left:-380px; /* half of the box */
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
#box {
background:pink;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#box {
width:460px;
background:black;
margin-left:-230px;
}
}
@media only screen and (min-width: 321px) and (max-width: 479px) {
#box {
width:300px;
background:blue;
margin-left:-150px;
}
}
@media only screen and (max-width: 320px) {
#box {
background:grey;
}
}
在这里演示，将内框边界拖到设备大小： http://jsfiddle.net/hD657/3/
Demo here, drag the inner frame boundary to „simulate device sizes": http://jsfiddle.net/hD657/3/
基于您的JavaScript的解决方案： http://jsfiddle.net/NnDvs/
Solution based on your JavaScript: http://jsfiddle.net/NnDvs/
回答您的 comment ：
margin-left 是基于框的宽度计算的，因此这是独立于任何视口或窗口宽度。我想从你的评论，你的盒子是关闭一些像素（你应该说明更清楚，所以我们可以帮助更好）。 jQuery的 width 将返回宽度without的滚动条，所以它会根据内容的高度（即如果有一个滚动条或不是）改变。您可以尝试在获取宽度之前隐藏滚动条： document.body.style.overflow =hidden; 。但一般来说，我会说，返回值 .width（）应该是你正在寻找。这是您要找的吗？
margin-left is calculated based on the width of the box, so this is independent on any viewport or window width. I guess from your comment that your box is just off by some pixels (you should state that more clearly so we can help better). jQuery's width will return the width "without" the scrollbar, so it changes based on the height of the contents (i.e. if there is a scrollbar or not). You could try to "hide" the scrollbars temporary before getting the width: document.body.style.overflow = "hidden";. But in general, I would say that the returned value of .width() should be what you are looking for. Is this what you are looking for?
这篇关于即使在窗口重新调整大小后（对于响应式设计），中心绝对定位DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
