Q
水平中心div
7
A
回答
6
與@rquinn答案相同,但可以調整爲任意寬度。檢查這個演示
http://jsfiddle.net/Starx/V7xrF/1/
HTML:
<div id="container"></div>
CSS:
* { margin:0;padding:0; }
#container {
width:50px;
position:absolute;
height:400px;
display:block;
background: #ccc;
}
的Javascript
function setMargins() {
width = $(window).width();
containerWidth = $("#container").width();
leftMargin = (width-containerWidth)/2;
$("#container").css("marginLeft", leftMargin);
}
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
1
容器寬度爲1024px,因此您可以嘗試給左側值50%和左側餘量:-512px。
0
使用Javascript,這會將#container放在瀏覽器窗口的中心位置。
document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px';
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px';
3
您可以使用也使用jQuery:
function setMargins() {
var width = $(window).width();
if(width > 1024){
var leftMargin = (width - 1024)/2;
$("#container").css("marginLeft", leftMargin);
}
}
然後我把這個代碼$(document).ready
事件之後:
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
0
如果你的主容器使用absolute
的位置,你可以使用這個CSS使其居中居中;
#container {
position:absolute;
width:1000px; /* adjust accordingly */
left:50%;
margin-left:-500px; /* this should be half of the width */
}
0
很簡單。 試試這個
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for Internet Explorer 5/Windows hack. */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto". */
text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
0
這種方式最適合我。沒有改變利潤率,但位置。 要求: object - > margin-left:0;和位置:相對;
檢查這裏例如:jsfiddle 代碼:
function setObjPosition(container, object) {
var containerWidth = $(container).width();
var objectWidth = $(object).width();
var position = (containerWidth/2) - (objectWidth/2);
$(object).css('left', position);
}
function setPositionOnResize(container, object) {
setObjPosition(container, object);
$(container).resize(function() {
setObjPosition(container, object);
});
}
用途:
<script type="text/javascript">
$(document).ready(function() {
setPositionOnResize(window, "#PanelTeste");
});
</script>
它可以在任何容器中居中。
相關問題
- 1. 中心DIV水平
- 2. 中心水平輸入div
- 3. Div水平中心和垂直中間
- 4. 如何將div對齊到水平和水平中心
- 5. 水平視差滾動到中心DIV
- 6. 父母不能水平中心div
- 7. CSS垂直和水平中心Div
- 8. Div水平中心沒有絕對
- 9. 中心DIV水平和垂直
- 10. 水平中心靜態ASP菜單div
- 11. CSS/jQuery垂直和水平中心DIV
- 12. 中心div上的水平滾動
- 13. javascript水平中心
- 14. 疊加在一個div中心的水平和垂直中心在DIV
- 15. 水平中心在一個容器div內的兩個div
- 16. 中心div水平和垂直裏面另一個div
- 17. DIV水平
- 18. 水平的css中心
- 19. 中心水平文本
- 20. 水平對齊textView中心
- 21. 中心利用水平
- 22. 中心水平RecyclerView在RelativeLayout
- 23. EditText中心水平線
- 24. 中心的圖像水平
- 25. HTML水平導航中心
- 26. 無法水平居中div
- 27. 居中對齊水平div
- 28. 如何水平居中DIV
- 29. 水平居中浮動div
- 30. div中間的水平線
正在使用腳本行嗎? – Starx 2011-01-12 07:54:52
@Starx很好的問題,我已經更新了我的帖子,答案是肯定的 – 2011-01-12 08:05:33
@rquinn爲你解答 – Starx 2011-01-12 09:22:21