I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.
Examples serve best
On this page :
the ascii art should be centered (as it appears) but it should line up and look like "YAML".
Or this :
the error message should all line up as it does in a console.
Possible? Hard? Easy?
If I understand you well, you need to use to center a container (or block)
margin-left: auto;
margin-right: auto;
and to left align it's contents:
text-align: left;
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Normally you should use margin: 0 auto on the div as mentioned in the other answers, but you'll have to specify a width for the div. If you don't want to specify a width you could either (this is depending on what you're trying to do) use margins, something like margin: 0 200px; , this should make your content seems as if it's centered, you could also see the answer of Leyu to my question
Reposing working answer from other question: http://stackoverflow.com/questions/1232096/how-to-horizonatally-center-a-floating-element-of-a-variable-width/1232297#1232297
Assuming the element which is floated and will be centered is a div with an id="content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats