I'd like to have one div at center of another div horizontally.
<div id="container">
<div id="centered">
hello world;
</div>
</div
I tried with below style with "margin: 0px auto" trick, but it only works in FF, not in IE.
div
{
border-width: 2px;
border-style: solid;
}
#centered
{
margin: 0 auto;
width: 30px;
}
#container
{
width: 100px;
}
Is there any way to achieve this cross browser?
You probably are not including a DOCTYPE in your document, thus throwing IE into quirks mode.
Add this at the top of your file, for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
See the difference here: with doctype, without doctype.
It is a very good practice to always include a DOCTYPE into your document to make your website be as consistent as possible across browsers. With a DOCTYPE and a reset stylesheet cross browser layouts are much more reliable.
The above DOCTYPE is just one of many choices. For more, check out this stackoverflow question
You may also notice that Stackoverflow's sister site aimed at designers is named after this very important aspect of web design: Doctype.
IE is a PITA. You can do it with tables deprecated markup (cringe).
<table width="100%" height="100%"><tr><td align="center" valign="middle">
CONTENT
</td></tr></td>
I'm sure you can pull it off with CSS hacks too.
Add text-align:center; to container. Side note: the text in the centered div will be centered also.
See Quirks mode and strict mode and Activating Browser Modes with Doctype. Basically it's good practice to force browsers (particularly IE) to be more standards-compliant by always using a DOCTYPE at the top of the document, like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
With that all browsers will horizontally center with margin: 0 auto.
Edit: this question originally said "vertical centering, hence the answer below:
From Vertical Centering in CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Basically, it's complicated involving relative+absolute+relative positioning (whereas its trivial with a table cell contents).
This works for me, but it's fairly fragile, so use pixels or ems, not percentages:
<style type="text/css">
#div1 {
height: 20em;
width: 30em;
border: 1px dashed #000;
text-align:center;
}
#div2 {
height: 5em;
width: 5em;
border: 1px solid #000;
margin: auto;
margin-top: 25%;
margin-bottom: -25%;
line-height: 5em;
}
</style>
<div id="div1">
<div id="div2">Woot!</div>
</div>
I just set the top margin to 25% and the bottom to -25%. Seems to work pretty well.