水平居中浮动div

我想要一个水平居中的“浮动”div，即即使用户滚动也总是在屏幕顶部的div。水平居中浮动div

用下面的CSS我得到的股利完全集中在左侧：

#guiBar { 
margin-left: auto; 
margin-right: auto; 
position: fixed; 
}

margin: 0 auto并没有帮助（大概是因为不与position: fixed

我不一起工作”我真的很在意这个解决方案是如何工作的，所以javascript或者一些html5技巧会和纯CSS一样好。我已经尝试过找到here from starx的解决方案，但是这个解决方案似乎也不适用于position：fixed。还有this工作要么（即它是左中心 - 不知道我的<input class="guiButton" type="image" src="/icons/some.png" />发数由他的定义有一个固定大小）

来源

2012-01-05 Voo

如果你的元素是固定宽度（例如宽度：400像素），可以使用左侧和顶部与边距的属性以及属性：

#guiBar 
{ 
    position:fixed; 
    left:50%; 
    margin-left:-200px; /*half the width*/ 
}

演示：http://jsfiddle.net/VtqQD/1/show
来源：http://jsfiddle.net/VtqQD/1

编辑：谢谢Xander指出问题只是关于水平定位。

来源

2012-01-05 19:28:23

+1虽然不应该是这个 - http://jsfiddle.net/VtqQD/1/ – xandercoded 2012-01-05 19:31:21

@Xander啊！非常正确！我似乎领先于自己......编辑：修复。感谢您指出:) – 2012-01-05 19:32:35

谢谢，我通常离客户端很远，所以我确信这是一个非常愚蠢的问题，我正在学习。 – Voo 2012-01-05 19:41:15

只需将层的元素是：只是

z-index: 9999;

这将保证你一直在上面（z轴的框），然后你它的位置，无论你想X/Y轴

参考：Adding z-index MDN

来源

2012-01-05 19:25:31 Jakub

我已经使用了Z-indizes确保点击/触摸事件到达正确的元素，但我不看看这是如何帮助我集中浮动div？ – Voo 2012-01-05 19:28:46

你为你的div定义了一个宽度/高度，现在你没有尺寸了（至少从你的例子中） – Jakub 2012-01-05 19:29:31

通过使用下面的javascript，你的div或窗口的大小无关紧要。它可以用于固定布局和流动布局，因为JavaScript在加载后会找到窗口/ div的大小。 – user982853 2012-01-05 19:34:16

可以使用采用javascript使用scrollHieght和scrollWidth找到父div的高度和宽度。然后用这些值除以2得到div中心的值。然后通过您想要放在顶部的div的尺寸来抵消它。

如果你想要整个屏幕/窗口的中心使用window.innerHeight和window.innerWidth然后除以二，并抵消你的股利。

来源

2012-01-05 19:26:07 user982853

我做了一个小小的例子：

<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>

我希望它会帮助你的！

来源

2012-01-05 19:34:53

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

尝试一下http://jsfiddle.net/RfRAb/

来源

2012-01-05 19:37:03 Tank

水平居中浮动div

回答

相关问题