I'm trying to center 1 #div box with two small #divs inside of it, to be in the exact middle of the screen/page - ideally across all resolutions and IE 6 +, whats the best approach?
margin:0 auto;
seems to do the trick horizontally, but what about vertically?
If you know the size of the element you want to center, you can set the following CSS for it to center horizontally and vertically:
#centered {
position : absolute;
left : 50%;
top : 50%;
width : 150px;
height : 200px;
margin : -100px 0 0 -75px;/*set the left and top margins to the negative of half the element's width and height (respectively)*/
background : #000;
}
Note that the parent of the element needs to have position set to something other than static:
#container {
position : relative;
width : 100%;
height : 100%;
border : 1px solid #000;
}
Here is a jsfiddle: http://jsfiddle.net/jasper/rcN3P/
P.S. I checked and this works in I.E. 6.
I just read this article on css-tricks about centering, it gives a interesting approach using pseudo elements, but you could just as easily add those elements into the markup instead (it wont be semantic but it will work).
http://css-tricks.com/14745-centering-in-the-unknown/
Related
I have 3 div's:
.left, .right {
width: 30px;
resize: none;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
max-width: 960px;
margin: 0 auto;
}
What I want to achieve is that only the middle one resizes when resizing the browser. In the left and right div there is an image that is part of the design.
When I make the browser smaller, the left en right div will narrow at one point and it seems that it is getting pushed into the center div. This makes the content of the center being pushed down. How can I make sure the 2 div will stay #30px?
Strange thing is, in the jsfiddle it does work...
jsfiddle
The issue is with the <img /> element you have in the header. When you hide it you can see that it no longer interferes with your layout.
The problem is because the <img /> element will expand to the maximum size of the container, which is 100%. That 100% does not include the 30px you have reserved for each side, as floated elements are taken out of the document flow. Declaring 100% of a child element means it will expand to the width of its parent elements, without taking into account the extra space taken up by floated siblings. Therefore, a solution would be using CSS calc to constrain the width of .center, and float it to the left, too:
.center {
width: calc(100% - 60px);
}
Alternatively, you can give .center a margin of 30px on the left and on the right. The floated divs will ignore margins because they are taken out of the document flow, and will fit perfectly within that 30px corridor you have created for them.
.center {
margin: 0 30px;
}
Both methods I have tested and verified by playing with the Inspector on the link you have provided. The calc() method might suffer from lack of support in older browsers, while the margin method will work for most browsers that are in use today :) pick any one.
Try setting the horizontal margin for your center div to the known width of the left and right divs:
.center {
max-width: 960px;
margin: 0 30px;
}
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;
}
IE7 seems to show scrollbars when an item that has position: relative on it USED to cause a scroll-bar (e.g. it would if you took position: relative off).
<div class="box">
<div class="inner box"></div>
</div>
.box {
position : absolute;
top : 5px;
left : 100px;
right : 5px;
height : 100px;
border : 1px solid #000;
}
.inner {
right : auto;
position : relative;
width : 110%;
left : -90px;
}
Demo: http://jsfiddle.net/VE9ne/1/
Wondering if anyone has seen this and knows how to fix it?
Use negative margins instead of negative left
...
left:0;
margin-left:-90px;
Add
html, body
{
overflow: hidden;
}
That's what relative positioning does, it leaves an empty space at the object's original position if you offset it. I guess IE7 is not as smart as other browsers so it will show scrollbars whereas others seem to realize there's nothing but empty space to show.
Here's what w3.org has to say about it:
[...] Offsetting a box (B1) in this
way has no effect on the box (B2) that
follows: B2 is given a position as if
B1 were not offset and B2 is not
re-positioned after B1's offset is
applied. [...]
Source: http://www.w3.org/TR/CSS21/visuren.html#relative-positioning
Using margins and floats instead of relative positioning could solve your problem
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
when i use top:50% and left:50%
the box is not directly in center. of course when the box is very small, it appears to be centered. but when box is a bit big, it looks as if it's not centered.
how can i resolve this ?
top and left correspond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set margin-top and margin-left to negative of one-half the height and width respectively, you'll get a centered box.
Example for a 300x200 box:
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
using translate will perfectly achieve that. simply apply this
div.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
source
Horizontal: Use a fixed width and
margin-left: auto;
margin-right: auto;
vertical: That's not that easy. You could use
display: table-cell
for the surrounding DIV and then give it a
vertical-align: middle
You can assign the box a fixed width and heigth, and then give it's margin-top and margin-left properties the negative half of the height and width.
EDIT: Example
div.centered {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
}
One way is to assign a specific width to the box, then halve the remaining distance on each (left and right) side. This may be easier if you use percentages instead of pixel widths, e.g.,
<div style="margin-left:25%; margin-right:25%">...</div>
This leaves 50% width for the div box.
The very bizarre CSS "language" does not provide a simple way to center a element in the screen. Kludges must be made! This is the only solution I came to elements that are AUTO in both height and width. Tryed in FF19 (Win+Mac), CH25 (Win+Mac) and IE9.
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
display:inline-block;
vertical-align:middle; /* this makes the magic */
width:1px;
height:100%;
overflow:hidden;
}
.overlay .message {
display:inline-block;
padding:10px;
border:2px solid #f00; /* aesthetics as you wish */
background-color:#ddd; /* aesthetics as you wish */
vertical-align:middle; /* this makes the magic */
max-width:100%; /* prevent long phrases break the v-alignment */
}
<div class="overlay">
<div class="vref"> </div>
<div class="message">whatever you want goes here</div>
<div class="vref"> </div>
</div>
body { text-align: center; }
#box {
width: 500px; /* or whatever your width is */
margin: 10px auto;
text-align: left;
}
The above would centre your box centrally horizontally on the page with a 10px margin at the top and bottom (obviously that top/bottom margin can be altered to whatever you want). The 'text-align' on the body is required for IE, which as usual doesn't quite get the hang of it otherwise. You then need the left text-align on your box (unless you want text it in centred too) to counteract the text-align center on the body.
Trying to centre vertically is just about impossible using pure CSS though. Though there's a vertical-align in CSS, it doesn't work like the HTML vertical align in tables, so in CSS 2 there's no in-built vertical align like the HTML one. The problem is that you're dealing with an unknown height - even if you know the height of your box, the height of the page is unknown, or rather what are you trying to fix the box in the centre of? The page? The viewport? The visible screen area's going to be different for everyone, depending on their screen resolution, browser, and all of the browsers interpret the height differently.
There are various methods that claim to have solved the problem, but usually they don't reliably work in all browsers. I found this one the other day, which doesn't seem bad, but it doesn't work in Google Chrome (works in Firefox and Opera, but I didn't get chance to check out IE). There's an interesting discussion on the problem though on this thread on Webmaster World that summarises the various methods and pros and cons of them and is well worth a look.
Edit:
Dav's solution in the first response works okay as long as you (or the visitor to the site) don't increase the font size or line height. The container will be centred, but as soon as the font size is increased or more content added, it'll overflow the container.
a. image (960x7)
b. div (width:960, padding:10)
I want to position (a) so that it's 50px from the top, centered.
I want to position (b) so that it's directly beneath (a) with no space.
My CSS follows:
#charset "utf-8";
* {margin:0;padding:0;}
body {background-color:#999;}
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}
My HTML follows:
<body>
<div class="pagetop" />
<div class="page">
<p>Warning sign, warning sign...I see it but I...pay it no mind.</p>
</div>
I'm trying to create a white container with rounded edges on a grey background. How can I do this simply and intelligently?
Check out this question for the rounded edges:
CSS Rounded corners
And for the positioning of the objects, I would go with something like this:
topimage {
position: absolute;
top: 50px;
text-algin: center;
}
To put the elements without a margin between them, you want the top image to have a zero bottom margin:
margin: 50px auto 0;
(Notice that you have to specify a unit (for example px) for any non-zero measurement.)
The background image will not give the top element it's size, you have to specify the width and height to match the size of the image. If the height is less than a regular character, you need to use something to keep Internet Explorer from expanding the element to the height of one character line, for example by using overflow: hidden; to keep the content from affecting the size of the element:
width: 960px; height: 10px; overflow: hidden;
The padding is added to the size of the element, so you have to make the page element 20 pixels narrower:
padding: 10px; width: 940px;
If your rounded corner image is 30px high, set .pagetop height to 30px, add 50px of padding to the top and set the top of the background image to 50px.
.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}