即使在窗口重新调整大小后也将绝对定位的 DIV 居中(用于响应式设计) [英] Centering absolute positioned DIV even after window re-size (for responsive design)
问题描述
我想在屏幕中间保留一个绝对定位的 DIV #box 即使在窗口重新调整大小和所有主要设备(响应式设计)之后.响应式#box 是使用 css3 媒体查询完成的，而 left 是使用 jquery 计算的.但是我可以将我的盒子准确地定位在中心，在为小屏幕重新调整窗口大小时，左和右不相等.右边距.
<身体><div id ="框"><a>在中心吗?'</a></HTML>
CSS:
#box {位置:绝对；背景:红色；宽度:900px；高度: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() {左边距()；});$(document).ready(function() {左边距()；});使用 CSS 将框居中 (source)，然后调整 width 和 margin-left在您的媒体查询中:
#box {位置:绝对；边框:1px 纯红色；宽度:760px；高度:30px；背景:黄色；左:50%；左边距:-380px;/* 一半的盒子 */}@media only screen and (min-width: 768px) and (max-width: 979px) {#盒子 {背景:粉红色；}}@media only screen and (min-width: 480px) and (max-width: 767px) {#盒子 {宽度:460px；背景:黑色；左边距:-230px；}}@media only screen and (min-width: 321px) and (max-width: 479px) {#盒子 {宽度:300px；背景:蓝色；左边距:-150px;}}@media only screen and (max-width: 320px) {#盒子 {背景:灰色；}}Demo在这里，拖动内框边界来模拟设备尺寸":http://jsfiddle.net/hD657/3/
基于您的 JavaScript 的解决方案:http://jsfiddle.net/NnDvs/
<小时>回答您的评论:
margin-left 是根据框的宽度计算的，因此这与任何视口或窗口宽度无关.我猜从你的评论中你的盒子只有一些像素(你应该更清楚地说明这一点，这样我们才能更好地提供帮助).jQuery 的 width 将返回没有"滚动条的宽度，因此它会根据内容的高度(即是否有滚动条)而变化.您可以尝试在获取宽度之前暂时隐藏"滚动条:document.body.style.overflow = "hidden";.但总的来说，我会说 .width() 的返回值应该是你要找的.这是您要找的吗?
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();
});
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;
}
}
Demo here, drag the inner frame boundary to „simulate device sizes": http://jsfiddle.net/hD657/3/
Solution based on your JavaScript: http://jsfiddle.net/NnDvs/
Answer to your comment:
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屋！
