I came across a solution for (horizontally) centering a fixed position element as follows:
element {
width: 200px;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
}
(where element is obviously the element to be centered).
The question is how does this actually work? Is this documented behaviour?
It’s a shame you can’t do the same thing vertically.
Thanks
You must set height to make it vertically center and top and bottom must be 0 also change the margin to this margin:auto
Try this one:
element {
width: 200px;
height:10px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom:0;
margin:auto;
}
The element is centered horizontally because of this line (Margin:0 auto).
The 0 defines top and bottom margin.
Auto = auto margin for left and right. This is the key of making the element to stay center.
Vertically is different because the way other elements can be place on top and below the element.
You can use this page for reference -> https://css-tricks.com/centering-css-complete-guide/
Reference from Mozilla Developer Network -> https://developer.mozilla.org/en/docs/Web/CSS/margin
OK, I think I have an answer, thanks to Smashing Magazine: Absolute Horizontal and Vertical Centering in CSS. Here is the brief version:
position: fixed or position: absolute removes the element from the normal flow, and the element gets its bearings from its container or the body.
top:0, bottom: 0, right: 0 and left: 0 effectively stretch the element to its container. For absolute & fixed position, they also define a bounding box..
setting the height and width restricts the size of the box, so it isn’t stretched, but:
The margin is calculated from the bounding box above. In particular, margin: auto causes the centering.
It appears that while a vertical margin: auto has no effect on normal elements (they are set to 0), they apply to fixed and absolute elements.
Note that the explanation above includes fixed positioning, which the article doesn’t focus on.
Thanks also to #winresh24 who pointed out the vertical centering. That help me to track down the solution.
Related
I would like to align div inside parent div to center horizontally for div with unknown width and dynamic content (will wary from use case to use case.
I have read that margin: auto; usually is usually solution here, but it requires set of width which is unknown for me compile-time. text-align: center does't work for div inside parent div.
Fiddle example
Here is a Fiddle example.
My two questions
I would like the three circles to be aligned to the middle. Number of circles can vary from zero to many.
Another related questions is how I can make the progress bar have a minimum width (for instance when having only one, two or three steps) and strech to right and left when adding more steps? Here is (very bad) illustration in Paint.
As a note I would like this to work for IE 8 as well.
Do you want something like this? DEMO
.progressbar{
top: 0;
position: fixed;
background-color: #00bbee;
width: 100%;
height: 45px;
left: 0;
text-align:center // added this line for centering the content
}
.steps {
display: inline-block; // and this line for auto-aligning center your child elements
}
Your first question can be solved by applying
text-align: center to the top wrapper and changing the display of the steps wrapper to inline-block
Regarding the second question, I'm not sure that this is exactly what you meant - but it can be solved by moving the line out of the steps wrapper and positioning it at the vertical center of the whole bar using
position: absolute;
height: 2px;
margin-top: -1px;
top: 50%;
left: 0:
width: 100%;
background-color: black;
Example in this fiddle
note that I also changed your html because there was some unnecessary tags there
For IE8 support check out this question (the only problematic issue here is the use of inline-block
I've got a div that sits inside another div and it's supposed to float above all of the other content in the div, and stick to the right of the div. To achieve this I had to set the div positioning to "Absolute" since when it is set to "Relative", it pushes all of the content to the side of it.
However, when positioning is set to Absolute, the div does not position correctly and sticks to the left side of the div instead of the right, causing usability problems. The div positions correctly when using Relative positioning, but not absolute.
I have tried setting the margin-left to the width of the div but the size of the div can change depending on the template the page is using. I have tried setting the margin-right property appropriately but the div moves when the browser is resized.
Expected result: http://puu.sh/479u1.png (this uses margin-right to position it but this was done to show simpily what was expected to happen - this cannot be used due to the unexpected movements caused when the browser is resized)
Actual result: http://puu.sh/479ya.png
CSS code for the floating div:
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
float: right;
width: 400px;
}
If you want to position the div to the right, then just use "right: 0px;" or something like that, in conjunction with "position: absolute;". As long as the parent div is positioned in some way (i.e. relative), that should do what you want.
Float does nothing on absolute positioned elements..
Use right: 0; instead of float: right;
It's a absolute div, so why float, use top and right
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
width: 400px;
top:100px;
right: 50px;
}
I'm creating a chat application and need to align messages from users the way is done in Skype, from bottom to top.
A solution was found here,
but it has couple of flaws.
the height of container is a fixed height, I need to cover all available height of the window (if I use height: 100%, it shrinks completely).
The height of the message item is fixed, I need it to adjust to its content height.
Having a poor experience with CSS I'm having troubles to fix these 2 issues.
Can someone point to a solution?
It could be easier if you have provided your own jsfiddle. But anyway, I'm trying to answer your question by taking #IlyaStreltsyn jsbin.
You can position to be fixed and set vertical-align bottom and apply the gap from bottom. Here I have used 0px for demonstration.
.wrapper {
display: table-cell;
vertical-align: bottom;
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
jsfiddle demo
To horizontally center an element, one sets width to x, left to 50% and margin-left to -x/2. This works perfectly with x = 50 % (see example below). Why does it not work for vertical centering? The example below does not work.
div.myDiv {
width: 50%;
height: 50%;
left: 50%;
top: 50%;
margin-left: -25%;
margin-top: -25%;
position: absolute;
border: 1px solid #555;
}
<div class="myDiv">I'm a div</div>
Tested in FF10 and IE8 with HTML 4.01 Transitional and only one div-tag in the body-section.
You don't have fixed width and height (fluid). So you can't make the div in center vertically just using the CSS you mentioned in your post. You need to go with javascript or jQuery to achieve that. I have done this before, so I am just linking it here. https://stackoverflow.com/a/15293191/1577396
As specified in W3C, the margin properties including margin-top and margin-bottom refers the width of the containing block (not the height), if set in percentages.
So, you can't align a fluid container vertically using margin-top and margin-bottom as the case in fixed dimension container.
Vertical centering can be done in css playing with display: table-cell or fiddling with line-height - just a starting point for you to play with
Try this:
div.myDiv {
margin: 0 auto;
}
auto will get you the horizontal centering you are looking for OR you can just set auto for the entire myDiv to get both vertical and horizontal centering.
div.myDiv {
margin:auto;
}
Is it good practise to set absolute positioning of a footer, if we know its height?
For example, if its height is 100px:
footer {
position:absolute;
bottom: 100px;
background: red;
}
And if its not, could you please help me to position a footer without divs, only with HTML5 tags, because i found some solutions, but they are with extra divs.
footer {
position: absolute;
bottom: 0;
height: 100px;
background: red;
}
When you specify the bottom position property you're positioning the bottom edge, so you don't need to account for the height like that. You'd only set it to 100px if you want the bottom edge to be 100px from the bottom of the page.
Usually the only time I find myself positioning the footer manually is if it's position: fixed though. Assuming your page flow isn't wacked it's usually easy enough to have it be the bottom element on the page naturally, which is what you're trying to achieve with position: absolute;.