admin管理员组

文章数量:1287169

I want a horizontally centered "floating" div, i.e. one that always is on top of the screen even if the user scrolls around.

With the following CSS I get the div centered pletely on the left:

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

margin: 0 auto doesn't help either (presumably because that doesn't work together with position: fixed ?

I don't really care how the solution works so javascript or some html5 trickery would be just as fine as pure css. I already tried the solution found here from starx but that also doesn't seem to work with position: fixed. there's also this which doesn't work either (i.e. it's left centered - not sure if a number of <input class="guiButton" type="image" src="/icons/some.png" /> have a fixed size by his definition.)

I want a horizontally centered "floating" div, i.e. one that always is on top of the screen even if the user scrolls around.

With the following CSS I get the div centered pletely on the left:

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

margin: 0 auto doesn't help either (presumably because that doesn't work together with position: fixed ?

I don't really care how the solution works so javascript or some html5 trickery would be just as fine as pure css. I already tried the solution found here from starx but that also doesn't seem to work with position: fixed. there's also this which doesn't work either (i.e. it's left centered - not sure if a number of <input class="guiButton" type="image" src="/icons/some.png" /> have a fixed size by his definition.)

  • javascript
  • css
  • html
Share Improve this question edited May 23, 2017 at 12:21 CommunityBot 11 silver badge asked Jan 5, 2012 at 19:22 VooVoo 30.2k13 gold badges89 silver badges163 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 10

If your element is a fixed width (for instance width:400px) you can use the left and top attributes along with the margin attributes:

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

Demo: http://jsfiddle/VtqQD/1/show
Source: http://jsfiddle/VtqQD/1

EDIT: Thanks to Xander for pointing out the question was about horizontal positioning only.

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

try it out http://jsfiddle/RfRAb/

You can use use javascript use scrollHieght and scrollWidth to find the height and width of parent div. Then used those values divided by two to get the values of the center of the div. Then offset it by the dimensions of the div you are wanting to lay on the top.

If you want the center of the entire screen/window use window.innerHeight and window.innerWidth then divide by two and offset by your div.

You would simply layer your element it with:

  z-index: 9999;

This would guarantee you keep the box on top (z axis), then you just position it wherever you want x/y axis

Reference: Adding z-index MDN

I made a tiny example:

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

I hope it will help you!

本文标签： javascriptcenter floating div horizontallyStack Overflow

版权声明：本文标题：javascript - center floating div horizontally - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741238768a2363549.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。