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?
Related
The div seems to center without me doing anything to center it and when I try to move it left or right, it won't cooperate very well at all and seems impossible to horizontally align. I don't understand why it starts out in the middle and I don't understand why doing things such as "margin-left:-10px" won't move it to the left at all.
*{
margin:0 auto;
}
#main_cont {
width:800px;
height:600px;
background-color:#CFA759;
position:relative;
margin-top:-20px;
margin-left:-10px;
}
You're setting auto-center margin on everything with this CSS:
* {
margin: 0 auto;
}
Remove that CSS, and rework your styling to apply auto-center margin only on the elements you need it on.
You've set all elements in the page to be horizontally centered with the code up the top:
* {
margin: 0 auto;
}
If you really need that there, then you could set position: absolute which would make the element's position relative to the first parent element that has a position other than static - W3Schools. So depending on the rest of your code, you should be okay.
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
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
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;}