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;}
Related
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
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 am having problems getting my main content div to stretch to full height, the other container is able to stretch to full height.
http://westcountrycreamteas.co.uk/test.html
Is the page I am trying to stretch down and the div that is having problems is inner.
Remove
height: auto !important
from your container div #outer.
Should fix the issue.
You could try
#para {
margin-left: 10%;
height:999px;
overflow:hidden;
}
but i think,the content area shallstretch depending on the content.
Fiddle http://jsfiddle.net/CPfyL/
There is a bug in your outer div. You have set its height using a percentage, but heights can only be set using px. What should you do:
Set the outer div height to a desirable amount, eg: height: 900px;
Set the height of the div you're talking about the same as the outer's one.
i think you want max-height :
div{
height:100%;
}
I have a DIV that has a width of 512px. Then inside that DIV is another DIV. I set the width of THAT DIV to 100%. However, it goes over which is not what I wanted.
I am trying to make it so it stays within the div. As in 5px padding on all sides.
http://jsfiddle.net/weka/USvTC/
This problem is happening because padding and border are not part of width: 100%.
Assuming you do want to absolutely position #exp_wrap, use this: http://jsfiddle.net/thirtydot/USvTC/1/
I removed width: 100% on .bar_wrap/#exp_wrap, and added right:5px; on #exp_wrap.
A block element such as a div defaults to width: auto, and takes the full available horizontal space. This is similar to how width: 100% works, except that padding and border are counted inside width: auto.
If #exp_wrap does not need to be absolutely positioned, use this: http://jsfiddle.net/thirtydot/USvTC/2/
I removed width: 100% on .bar_wrap/#exp_wrap again, and replaced position:absolute; top:5px; left:5px; with margin: 5px;. I also added overflow: hidden to .container to avoid collapsing margins.
Just set the width of the child element to 512-(2*5) pixels in width (502), not 100%.
Maybe the issue is the box-sizing of the child div. You can set it to border-box and then the child div shouldn't be longer than the parent div:
.child-div {
box-sizing: border-box;
}
You can read more here about the box-sizing property.
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?