中心浮动div水平
[英]center floating div horizontally
问题描述
我想要一个水平居中的“浮动”div，即即使用户滚动也始终位于屏幕顶部的div。
使用以下CSS，我将div完全放在左侧：
#guiBar {
margin-left: auto;
margin-right: auto;
position: fixed;
}
margin: 0 auto也没有帮助（大概是因为这不能与position: fixed一起工作position: fixed ？
我真的不在乎解决方案如何工作，所以javascript或一些html5技巧将与纯css一样好。 我已经尝试过从starx找到的解决方案，但这似乎也不适用于position：fixed。 还有这个也不起作用（即它是左中心的 - 不确定是否有一些<input class="guiButton" type="image" src="/icons/some.png" />有一个固定的大小他的定义。）
5 个解决方案
解决方案1
10 已采纳 2012-01-05 19:28:23
如果元素是固定宽度（例如宽度：400px），则可以使用left和top属性以及margin属性：
#guiBar
{
position:fixed;
left:50%;
margin-left:-200px; /*half the width*/
}
演示： http ： //jsfiddle.net/VtqQD/1/show
资料来源： http ： //jsfiddle.net/VtqQD/1
编辑：感谢Xander指出问题只是关于水平定位。
解决方案2
2 2012-01-05 19:37:03
HTML
<div id="subject">
<div id="predicate">
Read Me!
</div>
</div>
CSS
#subject {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#predicate {
position:relative;
top:50%;
margin:-20px auto auto auto; /*half of height*/
width:140px;
height:40px;
background:#b4da55;
}
解决方案3
1 2012-01-05 19:26:07
您可以使用javascript使用scrollHieght和scrollWidth来查找父div的高度和宽度。 然后使用这些值除以2得到div中心的值。 然后通过想要放在顶部的div的尺寸来抵消它。
如果你想要整个屏幕/窗口的中心使用window.innerHeight和window.innerWidth然后除以2并用你的div偏移。
解决方案4
0 2012-01-05 19:25:31
解决方案5
0 2012-01-05 19:34:53
我做了一个小例子：
<html>
<head>
<style type="text/css">
body { margin: 0; }
#wrapper { width: 500px; margin: 0 auto; }
#top { margin: 0 auto; width: inherit; background: red; position: fixed; }
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
foo
</div>
</div>
</body>
</html>
我希望它会对你有所帮助！
在 div 中水平居中按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.