After lots of attempts and search I have never found a satisfactory way to do it with CSS2.
A simple way to accomplish it is to wrap it into a handy TABLE as shown in the sample below. Do you know how to do it avoiding table layouts and also avoiding quirky tricks?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
table
{
margin:0px auto 0 auto;
}
</style>
</head>
<body>
<table>
<tr>
<td>test<br/>test</td>
</tr>
</table>
</body>
<html>
-
This is going to be the lamest answer, but it works:
Use the deprecated <center> tag.
:P
I told you it would be lame. But, like I said, it works!
*shudder*
From Jason Bunting -
@Jason, yep,
<center>works. Good times. I'll propose the following, though:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <style type="text/css"> body { text-align: center; } div.my-centered-content { margin: 0 auto; /* Centering */ display: inline; } </style> <title></title> </head> <body> <div class="my-centered-content"> <p>test</p> <p>test</p> </div> </body> </html>EDIT @Santi, a block-level element will fill the width of the parent container, so it will effectively be
width:100%and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to trydisplay: inline-block;. Firefox might complain, but it's right. Also, try adding aborder: solid red 1px;to the CSS of the.my-centered-contentDIV to see what's happening as you try these things out.Dawkins : display: inline-block worked fine in Firefox but in IE makes width to be 100%From Joe Liversedge -
I think that your example would work just as well if you used a <div> instead of a <table>. The only difference is that the text in the <table> is also centered. If you want that too, just add the text-align: center; rule.
Another thing to keep in mind is that the <div> will by default fill up all the available horizontal space. Put a border on it if you aren't sure where it starts and ends.
From Neall -
JasonBunting:
It is deprecated and not css but at least it works in IE and FF!
From Dawkins -
The following works well enough. note the position, and the use of auto
<div style="border: 1px solid black; width: 300px; height: 300px;"> <div style="width: 150px; height: 150px; background-color: blue; position: relative; left: auto; right: auto; margin-right: auto; margin-left: auto;"> </div> </div>NOTE: not sure if it works in IE.
From codeLes -
<html> <head> <title>untitled</title> <style type="text/css"> #wrapper { width: 100%; border: 1px solid #333; } #content { width: 200px; background: #00FF00; } </style> </head> <body> <div id="wrapper" align="center"> <div id="content" align="left"> Content Here </div> </div> </body> </html>From ironkeith -
Thanks for your answers. What I want to know is how to do it without a fixed width and also being a block.
From Dawkins -
In FF3, you can:
<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>This has the advantage of using whatever element makes most semantic sense (replace the div with something better, if appropriate), but the disadvantage that it fails in IE (grr...)
Other than that, without setting the width, your best bet is to use javascript to precisely position the left-hand edge. I'm not sure if you'd class that as a 'quirky trick', though.
It really depends on what you want to do, of course. Given your simple test case, a div with text-align: center would have exactly the same effect.
From Bobby Jack
0 comments:
Post a Comment