Paul Tarjan Paul Tarjan - 4 months ago 39
CSS Question

CSS: Center block, but align contents to the left

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.


Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?

Assuming the element which is floated and will be centered is a div with an id="content" ...

<div id="wrap">
   <div id="content">
   This will be centered

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