CODE:
*{
margin:0px;
padding:0px;
}
body{
font-family:sans-serif;
width:1024px;
height:700px;
border:1px solid green;
//margin:0 auto;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
1.i expected a centered box from all sides , but top part of the box model is at beginning of body, if i explicitly set margin-top:20px, boxmodel is moved down, but why top part doesnt align automatically like others.
2.i also didnt get what auto value "DOES" to achieve centering
in case of margin:0 auto; // what is the unit of 0?px,em or pt.
Vertical alignment in Css is such a fun and painful topic. This stackoverflow queston is the best concise explanation I have seen regarding why vertical alignment can be so painful
As to your 1st question, the reason you can't vertically align using margins is explained below in the quote.
... the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent. Whenever a vertical margin value is changed, it will trigger a parent element height re-calculation (reflow), which would in turn trigger a re-center of the original element... making it an infinite loop.
As to your 2nd question, margin auto achieves horizontal centering by calculating the width of the child container in relation to its parent's width. Then it does simple math to add an even amount of margin to the left and right of the child container, enforcing horizontal centering.
As for 2nd question Part B,
margin: auto is the same as the following:
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
where as margin: 0 auto is the equivalent to the following:
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
A solution to achieve vertical centering
There are some options that you can utilize however to achieve vertical alignment despite the limitations. The easiest is to leverage a table. With tables, one of the few strong points of them is that using the vertical-align property actually behaves as you would expect when enforced inside of a table. So you can do something like the following:
<body>
<table style="width: 100%; height: 100%">
<tr>
<td>
<div id="verticallyCenteredContent" style="vertical-align: middle">
OMG it's vertically aligned
</div>
<td>
<tr>
<table>
<body>
There are two other common methods that I demonstrated in this jsfiddle.
Useful article that demonstrates a number of scenarios and approaches for achieving vertical centering - Vertical Centering with Css
Cheers!
At first, use css to horizontal centering the "Div". After that is using javascript to centering vertical. See demo on jsfiddle
HTML:
<div class="center">Div content</div>
CSS:
.center {
font-family:sans-serif;
width:300px;
height:300px;
border:1px solid green;
margin: 0 auto;
text-align:center;
}
JS (JQuery):
$().ready(function () {
$(".center").css("margin-top", ($(window).height() - 300) / 2);
});
See demo on jsfiddle
Here is one more resource on CSS margin issue. http://techslate.net/looking-at-css-margins/
Related
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
<div id="wrapper" style="height:400px;width:400px;">
<div id="example">
Text
</div>
</div>
I'm looking for a way to get #example into the center (left, right, top, and bottom) of #wrapper.
I think there are multiple ways to achieve what you want. One would be:
#wrapper{
display:table-cell;
width:400px;
height:400px;
vertical-align:middle;
border:1px solid red;
}
#example{
width:200px;
margin:auto;
text-align:center;
background:blue;
}
Demo: http://jsfiddle.net/SsD4Q/3/
I hope that helped somehow!
Try giving #example margin: 0 auto;
The second property is the left/right margin. Auto should center it.
Edit: Sorry that this does not center vertically. I misunderstood. Please see http://www.jakpsatweb.cz/css/css-vertical-center-solution.html for vertical centering.
Vertical alignment is a tricky one unless your using tables.
I suggest you read this aritcle on centering elements.
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Aligning horizontally however is easy...
Assign a width and use margin:auto
#example {width:100px; margin: 0 auto;}
<div id="wrapper" style="height:400px;weight:400px;">
<div id="vertical" style="height: 50%; width: 100%; margin-top: -25px"></div>
<div id="example" style="margin: 0 auto; height: 50px">
Text
</div>
</div>
Set the margin-top minus half the height of the example div
I don't like the current proposed solutions... as they rely on either displaying as table-cells, or using static heights on #example and negative margins.
Here is my proposal, considering #wrapper has fixed height:
Set #wrapper's line-height equal to its height;
Set #wrapper's text-align to center and vertical-align to center;
Set #example's display to inline-block, so it is centered vertically and horizontally but still works as a block;
Make #example a span instead, so IE8- allows it to be inline-block.
http://jsfiddle.net/aneves_sw/yse9w/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to center DIV in DIV?
Sounds simple but couldn't figure it out:
How do I center a fixed width div on a page?
By default, it goes to the left.
halign is deprecated but I can find a could replacement.
[update]
width:800px;left-margin:auto;right-margin:auto:
works great.
Is there a way to do this without setting a fixed width?
Try this:
<style>
.centered {
margin-left:auto;
margin-right:auto;
}
</style>
<div class="centered">
Some text
</div>
<div style="margin:0 auto">content here</div>
You can center any div that doesn't span the entire page. Say your div is
.div {
width: 80%;
margin: 0 auto;
}
Then it will work fine. As Evan said "display: inline-block;" will make the div as wide as its contents which will also work great with "margin: 0 auto;".
A div, by default, is the entire width of the page. You can center the contents by setting the css of the div to:
.mydiv
{
text-align: center;
}
OR
You can center the div itself by doing this:
.mydiv
{
display: inline-block; /* make it be only as wide as its contents */
margin: auto; /* centering magic by making the margins equal and maximum */
}
div {
margin-left: auto;
margin-right: auto;
}
As long as you have an appropriate doctype declared, centering a div on a page should be as easy as:
#someDiv {
width: 624px;
margin-left: auto;
margin-right: auto;
}
If you're using IE and you don't have a doctype declared (you're running in quirks mode), this won't work. The fix is to add the appropriate doctype declaration to your page. You can find the appropriate declaration here:
W3C QA - Recommended list of Doctype declarations you can use in your Web document
There's generally two ways of doing (that I've seen). One with the margin attribute and another with positioning and left:50%
http://jsfiddle.net/NvaEE/
<br>
<div class="first"> I have a fixe dwidth</div>
<br>
<div class="second"> I have a fixe dwidth</div>
div{width:200px; background:#ddd;}
div.first{margin:0 auto;}
div.second{position:absolute;left:50%;margin-left:-100px}
margin:auto; should do the trick, I guess?
You wrap it in a container div that spans the width of the page and give that container div the
text-align: center;
css attribute.
There are other methods, such as managing the margins and widths. For most cases, you can get by with text-align.
I was searching the archives and came across the following article about how to center a div within a div, where the solution was to apply the following styles to the inner div:
#inner {
width: 50%;
margin: auto;
}
The answer states that the margin:auto is what causes the centering. How exactly does this work?
margin:auto; is specifically designed to automatically set a margin, usually for the purpose of centering an element. It actually only works on the left and right margins. Using margin:auto; is shorthand for the following:
{ margin:0px auto 0px auto; }
And to spell that out further:
{ margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; }
Check out the CSS2 spec.
It basically solves the equation margin = ("outer-width" - "inner-width") / 2 and sets the result to the margin value.
The result is, that the margin of your inner div is the same on both sides and its overall width (width + 2×border + 2×margin) fills exactly your outer div. So it's body is centered.
For me, one of the most useful features of tables is that their width adjust to its content.
You can very easily do things like:
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.
You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.
So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?
The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
Demo
Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/
I'll lengthen it when I'm not sleepy.
Quoting CSS: The Definitive Guide by Eric Meyer
If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:
p {width: 100px; margin-left: auto; margin-right: auto;}
Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)
In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.
However,
One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.
If your intend is to display just some text at the middle of the page, you can use something like this:
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.
Note this is limited to single line text only (like "some text here").
Use this CSS
#content {
position: absolute;
width: 150px;
margin-left: -75px;
left: 50%;
border: 1px solid #000;
text-align: center;
padding: 20px;
}
and this html
<div id="content">
some text here
</div>
Good golly, miss Molly! These answers are really overcomplicated.
CSS:
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
And then use this in your body:
<div class="centered"><span>Hello world!</span></div>