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