<div id="someid">some text here</div>
css...
#someid{position: fixed; width: 500px; height: 30px;}
I want to position absolutely center to horizontal and vertical to window?
#someid{
position:
fixed;
width: 500px;
height: 30px;
right:50%;
margin-right:-250px;
}
The negative margin is to fix the offset that occurs when the browser will consider the div's right side to be 50% from the right of the browser window.
To center it vertically, you may want to try the same thing (no guarantees here though as I haven't done this before) with its vertical position.
For example:
top:50%;
margin-top:-15px;
Edit
A little more thorough explanation: When #someid is placed 50% from the right it is positioned so that it is 50% of its parent's total width away from the parent's right border. This however, doesn't measure from the center of #someid to the right border of its parent element, it measures from the right side of #someid to the right side of its parent element. This of course, doesn't quite center #someid, it's still offset by half of its width.
This is why we use a negative margin to offset it. The negative margin needs to be half of #someid's width to make up for the offset to the left that occures when we place it by it's right side 50% from the right of its parent element.
While your position is fixed you cannot position the div relatively. You must calculate the top and left values by javascript. You can center its position horizontally by writing this:
width: #SOMEWIDTH#px;
margin: 0 auto;
To make the margin position the div at the center the width attribute MUST be set.
Auto margining does not affect vertical postiion.
Related
This question already has answers here:
Why magin:auto is not enough to center position absolute or fixed?
(3 answers)
Closed 4 months ago.
I am learning the many ways to center an element in the middle of the screen. I just discovered the code below, and I am trying to understand the technical explanation behind how it works.
<body>
<div class="square"></div>
</body>
.square{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: pink;
height: 50px;
width: 50px;
}
At first, I thought if both top and bottom are zero, the element will be we vertically centered on the screen. Also if both left and right are zero, the element will be horizontally centered on the screen. But all this will not work without margin: auto. Can you help me understand how margin interacts with top, bottom, left and right?
This div is in the center because you have set the margin to auto. what happens when you set margin to auto it will calculate the distance from all directions weather it is top, bottom, left, or right. the distance from each point will be same that's why the div is in center.
for example if we have to middle the webpage in horizontal center we give the webpage margin like this.
body {
margin:0 auto;
}
this will make the body equal distance from left and right side but it will give 0 margin on top and bottom.
margin
The margin property is actually a shorthand property for the following individual margin properties:
margin-top
margin-right
margin-bottom
margin-left
In margin auto, the element will take up the specified width, and the remaining space will be split equally between the left and right margins, similarly for the top and bottom.
First you need to understand what margin: auto; does.
by setting margin-left: auto; will take up the right whole space of screen and the element is slipped to the right of the screen
and margin-right: auto; will take up the right whole margin and element is slipped to the left
and one point to remember is margin for top and bottom does not work
When we use the margin: auto; it means we are letting our element to take up the equal margin from left and right and align itself in the center(horizontally)
Further you can use left, right, bottom and top positioning only when the margin: auto; is turned on
top: 0; //means margin from top is 0 and element is fixed to top
bottom: 0; //means margin from bottom is 0 and element is fixed at the bottom
and same is the case with left and right
when we use them all at once it means that we are specifying each element to stretch in every left, right, bottom, and top position which is only possible when element has width equal to the screen
So the element is aligned horizontally and vertically as well
For further guidance you can consult this documentation:
https://www.hongkiat.com/blog/css-margin-auto/
This is a cut down version of my code: http://jsfiddle.net/f6GCz/
I'm trying to vertically center the "learn more" box using this code:
position: absolute;
margin-left: auto;
margin-right: auto;
What would cause this box not to be centered vertically? Even when I apply a width to it it doesnt work. Cross browser solutions (IE8+) preferred!
If you have to use absolute positioning, add this to your "learn more" box css:
left:50%;
width:90px;
margin-left:-45px;
Where the margin-left is always 1/2 of the container width.
Update
If you don't have to use absolute, then give the div a width and set the margin to:
margin:0 auto;
If desired, the width can be a percentage instead of a px value.
Updated fiddle with both results.
Update Two
If you want to align your learn more box without specifying it as absolute, put it inside a footer container that is positioned at the bottom, then use margin:0 auto on it. Something like this: Fiddle 2
I'm trying to make a header which contains two buttons and a "logo". The two buttons should float right and left, relative to the browser and the "logo" should be in the absolute horizontal center, again relative to browser.
It all worked out fine until I realized that the logo sits in the center between the two buttons which differ in size, putting it off-centre.
Here's my code: Clicky
I tried some absolute positioning, but it did nothing, probably due to ignorance on my part.
#head {
position: absolute;
left: 50%;
}
It looks like you tried to use the 'text-align: center' on the parent container to make this work. And it is working, except that it's centering all 3 of those elements as a whole. You can see that here if you remove the floats: http://jsfiddle.net/aHP6D/1/.
So, one option would be to position the buttons absolutely, thus taking them out of the normal document flow. This means the only <span> that's left (and not absolutely positioned) is the one you want centered.
You can see that working here:
http://jsfiddle.net/aHP6D/2/
To center something, just set the margin to auto:
#head{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
to center it completely:
#head{
position:relative:
margin:auto;
}
Setting #head’s position to absolute and left property to 50% will center its left side. Setting its margin-left property to negative half its width will pull it back to the center.
#head {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
See http://jsfiddle.net/exs78/ for an example.
I came across the following css snippet. It gives an element with id search bar the absolute position,a width of 300px,height of 27px and it sets the search bar 50% from it's normal position
#search_bar {
position:relative;
width: 300px;
left:50%;
height:27px;
}
But I don't see the search bar aligned in the center. Why is that ? But if I change the snippet to :
#search_bar {
position:relative;
width: 300px;
margin-left:-150px;
left:50%;
height:27px;
}
it gets aligned to the center of the page. How is that ? What does the property margin-left:-150px do to set it to the center ?
It is because you are using position absolute so the negative margin is half of the width of the element so that it shifts the element behind by 1/2 of it's total width
position: absolute;
left: 50%; /* This shifts the element 50% from left, if you
don't want to use negative margins you can use 45%, 40% but you need
to fiddle with the measurements first */
So the calculation goes like
Total Container Width 1000px
Element Width 300px
left: 50% means it will start from left 500px to 800px
So this is not centered yea?
So -150px from 500px /* 500 here is left: 50% */
You get element from 350px to 650px
left: 50% puts the beginning of the bar at the middle of the screen, which isn't centered. However, if you know the width of the bar (300px), then move it left half of that, then the middle of the bar will be in the middle of the screen. Does that make sense? 150 is half of the 300 width. If the bar was 400 width, then you would need to use -200.
By using relative positioning, you're allowing movement of the block relative to where it would be if it was static. left: 50% places the left side of the margin half way across the containing positioned block which for you is probably the viewport (aka the browser window). margin-left: -150px will then move the left side of the margin box to the left 150px from the current position margin box. Since your total width is 300px, this makes it so that the border/content box is centered relative to the containing positioned block.
I've got a project where I need to top-right align a div so that it sits on top of an existing variable-width td.
What has me stumped is the variable width aspect. I can get the div to sit on top of the existing relatively positioned td by using fixed positioning for the div. However, because the TD width can change I can't set a "left:" value for the div.
I've created a fiddle to demonstrate it with left aligned in the td, now I just need to get it to right align:
jsfiddle.net/ErDr6/36/
I've looked at some other posts, but they seem to deal with fixed width elements:
Align div with fixed position on the right side
Firstly, change position: fixed; to position: absolute; so that the arrows won't stay fixed relative to the viewport when the page scrolls. Then, add the following:
#col_arrow {
right: 0;
}
.wc-day-column-header {
position: relative;
}
That will align the arrow to the right of its parent. We add position: relative; to the parent to restrict it to that container.
If it needs to be dynamic then absolute position can be calculated as:
theTD.offsetLeft+theTD.offsetWidth-arrow.offsetWidth