水平居中浮動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

回答

相關問題