Could anyone tell me how i would get this div to be centred at the top of the screen, with equal distances from the bounds of the page on both the left and the right.
position:relative;
width:800px;
height:70px;
background-color:#0CF;
left: 15%;
Thanks!
By specifying automatic margins for left and right edges:
margin:0 auto;
This forces the browser to equalize them within the parent, which has full browser width, so it's centered since you have explicitly set the width.
Sample implementation.
Since you have a width set, you should use
margin:0 auto;
You should try this jsfiddle :
HTML :
<div>This is some DIV</div>
CSS :
div {
width : 50%;
margin : auto;
border : 1px solid black; // To see that it is centered
}
Usually when doing this you want to do something like below. It will stay withing the bounds of it's parent element and wherever you put it on the page but will place it in the middle.
If you want to put it in the code:
style="
margin-left:auto;
margin-right:auto;"
Otherwise just add that to your css for the div.
using this method will not set your upper and lower margin to auto.
use margin: 0 auto;
0 - stands for 0px top and bottom sides of the page
auto - means it'll adjust itself according to the available window size and can make it center.
Well it depends on the parent element, and why you have it as position:relative;, but generally to center a block level element with a set width, within it's parent, you can just use:
margin:0 auto
Related
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
A seemingly simple issue, but other solutions I found didn't quite work here.
Attempting to center '.grid-wrapper-inner' within '.grid-wrapper'
.grid-wrapper {
background:grey;
display:block;
margin:0 auto;
width:90%;
padding:80px 0;
text-align:center;
}
.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
text-align:left;
}
I thought 'display:inline-block' (with 'text-align:center' on the parent) would achieve this, but have hit a brick wall
Best explained here:
http://jsfiddle.net/YrF9C/1
Essentially need to prevent grid-wrapper-inner from taking up 100% of its parent div so it can be centered.
I did get the green boxes (see link) centered by using inline-block on those, but orphaned boxes at the bottom were then centered, which isn't the desired effect.
Many thanks in advance for any help!
You have to set width to .grid-wrapper-inner. You can try set 90%, you will notice the difference.
.You could do one of two things:
add a width to the inner wrapper
.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
width:80%;
text-align:left;
}
or you could add padding to .grid-wrapper
You can use margin:auto to center horizontally, but for that to work the inner div you're trying to center needs to have some sort of width specified. Otherwise it just stretches and the auto margin is 0. Technically this is centered too, but not what you want.
For example try adding width: 86% to .grid-wrapper-inner.
Alternatively if you don't want to set a width, you'll need to set an actual margin that's the same left and right, e.g. change margin:0 auto; in .grid-wrapper-inner to margin: 5% or margin: 50px.
Instead of padding:80px 0; change it to padding:80px;. You are setting the padding only for top and bottom but the left and right is 0 so the inner div is expanding up until the left & right border of the wrapper div. Its still centred both vertically and horizontally just padding is 0 on the left and on the right.
Setting width to .grid-wrapper-inner, would solve your problem, but apparently you cannot or don't want to do it. Then, if you still want to make the layout adapt to screen size, perhaps you could think about using CSS media queries?
I was wondering how I can center this http://prntscr.com/hv2q7 It is hanging off and I want it to be centered like this http://prntscr.com/hv2ue so that the gray part is coming into the border. Here is the css code and html for it :
The css:
#banner{
height: 279px;
width: 998px;
margin-right: 0px;
margin-left: 0px;
background-image:
url(/template/default/images/layout/background/newlayout/test.png);
}
The html :
<div id="banner" ></div>
You want to set your left and right margins to auto, not 0px.
Try this, it's the shorthand for setting your top/bottom margin to 0 and your left/right to auto:
#banner {
margin:0 auto;
}
Centering with css normally revolves around the use of margin:auto;
In this case you're looking at left and right margins being auto, so something like margin:0 auto; As you try it out for your full page specifically you may find you have to set the elements' display to block or the float or even a position, depending on the browser. Though those are usually not necessary.
Also, if the div really only contains the background image, you might set the background-repeat to none and the background-position to center. That would only center in the div, so if the div is actually showing as the width and height of the image, it wouldn't change anything, but if the div is filling the width of it's containing block, then you'd get left and right centering.
put this arround your banner code:
<div align="center"> "your banner code" </div>
I tried to center my div using margin: auto like this:
#main-container #control-panel {margin: 10px auto;}
But it still align to the left. I found that I have to specify a width for the div so that it will get centered:
#main-container #control-panel {width: 300px; margin: 10px auto;}
So, is width necessary for centering a div? I thought the width of div should be automatically modified by its inner content? (In this case, I have a button inside the control-panel div)
The result is tested under latest Chrome.
Yes, it's necessary.
The default value for the width of a div is auto, which means that it will try to take up all available space horisontally. As that leaves no margins on the sides, the automatic margins will be zero.
Yes, you have to define width to your div if you want him in center
But in case you didn't want fixed width then just define text-align:center in parent div & define display:inline-block to it like this:
.parent{
text-align:center;
}
.child{
display:inline-block;
text-align:left;
}
check this http://jsfiddle.net/sandeep/HzuYv/
div elements are always, by default, auto (100% wide of the parent container). You want to center that element, and you set margin:0 auto, it'll be centered BUT you won't notice it, because it's 100% wide.
That's why it looks like it's not centered :)
Yes, when using margin-left/margin-right:auto;, you must specify a width for the div.
Without a width a div naturally has an auto width so it is center aligned, but you can't tell as its filling the container.
Yes width is necessary,try this:
#control-panel { width=970px;margin: 0 auto;}
I have an image of variable width that I'd like to center in a container div, which will be centered on the page.
If I set a width on the div and give it a margin: 0 auto, it will center, but the problem is that the image inside of the div is of variable width, so I can't set a width on the container div.
Any suggestions?
Clarification: The container div has a background image that needs to expand 30px on either side of the image. Because of that, the container div needs to be of a set width but be able to expand/contract based on the image size.
add padding to the image!
img#foo{
display:block;
margin:0 auto;
background:url(/image/bg.gif);
padding: 30px;
}
img#foo {
display:block;
margin:0 auto;
}
An image element is a replaced element and its intrinsic width will allow it to be centered without an explicit width set.
Maybe setting image as background and center it would work?