即使在窗口重新大小（響應式設計）

我想即使在窗口重新大小和所有主要設備（響應式設計），以保持絕對定位DIV #box屏幕對中心絕對定位DIV。響應式#box使用css3媒體查詢完成，而left使用jquery進行計算。但我可以在中心準確地定位我的盒子，在窗口重新大小小屏幕有不平等的左&右頁邊距。即使在窗口重新大小（響應式設計）

<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(); 
});

來源

2013-07-29 galexy

中心使用CSS（source）的複選框，然後適應在你的媒體查詢width和margin-left ：

#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; 
    } 
}

在這裏演示，將內框邊界拖到「模擬設備尺寸」：根據你的JavaScript http://jsfiddle.net/hD657/3/

解決方案：http://jsfiddle.net/NnDvs/

回答您的comment：

margin-left是基於框的寬度計算，所以這是獨立於任何視窗或窗口寬度。我想從你的評論中可以看出，你的盒子只是被一些像素（你應該更清楚地說明，這樣我們可以更好地幫助）。 jQuery的width將返回寬度「沒有」的滾動條，所以它改變基於內容的高度（即，如果有一個滾動條或沒有）。在獲取寬度之前，您可以嘗試臨時「隱藏」滾動條：document.body.style.overflow = "hidden";。但總的來說，我會說.width()的返回值應該是你正在尋找的。這是你想要的？

來源

2013-07-29 15:09:01 Wolfram

感謝您的回答！這接近我想要的東西。這在特定的屏幕尺寸上工作正常。但我想用jquery實現margin-left，所以即使在單個像素重新調整大小的情況下，我的div框仍然始終位於中心。 – galexy

這是'left：50％'實際上做的事情。當視口寬度改變1px時，你的盒子的寬度是否改變？然後看看我的JavaScript解決方案。 margin-left的值在'resize'上設置，並使用框的當前寬度進行計算。 – Wolfram

更新了第二個解決方案，盒子現在寬30％，所以它不斷變化：http://jsfiddle.net/NnDvs/1/ – Wolfram

您可以再補充這一點，甚至不需要媒體查詢或JavaScript（因爲你知道這個盒子的大小）：

#box { 
    position:absolute; 
    background:red; 
    width:900px; 
    height:400px; 
    top: 50%; 
    left: 50%; 
    margin-top: -200px; // half total width (border, padding, and width) 
    margin-left: -450px; // half total height (border, padding, and width) 
}

如果你沒有不是k現在的寬度，但都沒事只定位到支持改造現代瀏覽器，更換margins有：

transform: translate(-50%, -50%);

來源

2013-07-29 14:47:48 kalley

這是固定寬度和高度的大屏幕的okey;但我的＃盒具有可變寬度和高度的響應式設計。 – galexy

然後使用第二個選項。即使使用百分比來表示高度和寬度，它也可以工作。媒體查詢和轉換具有相同的瀏覽器共享，因此您可以輕鬆地將JavaScript用於不支持轉換的舊版瀏覽器。 – kalley

採取%的width和height。

看到這個小提琴：Fiddle

我已經加入：

body{ 
    width: 100%; 
    margin: 0 auto; 
} 
#box { 
     position:absolute; 
     background:red; 
     width:80%; 
     height:40%; 
     margin-left: 10%; 
     margin-top: 20%; 
}

來源

2013-07-29 14:52:17

感謝您的建議aayushi！但我想堅持精確的寬度，而不是用百分比寬度。 – galexy

好吧，檢查更新的小提琴，然後更改'寬度：900px和高度：450px;'並測試。 –

它的作品很好！因爲寬度與窗口寬度成正比。但在我的情況下，框寬是針對不同的屏幕尺寸而不同的。 – galexy

不太清楚你想要什麼，圍繞一個絕對定位的div是容易的，但什麼是這種關於響應式設計和可變寬度/高度？

我能想出的最好的方法是使用顯示錶格單元格：

html { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
body { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
} 

#box { 
    display: inline-block; 
    background: #c00; 
}

http://jsfiddle.net/f00dmonsta/cZC3g/

來源

2013-07-29 15:00:59 Populus

看到我的css3媒體查詢！對於不同的屏幕尺寸，我的#box具有不同的寬度（寬度根據屏幕尺寸而變化）。所以我想將我的#box放在所有屏幕尺寸的中央。 – galexy

你可以使用你的媒體查詢，上面的設置應該居中＃任意寬度/高度的＃盒子...... – Populus

即使在窗口重新大小（響應式設計）

回答

相關問題