CSS: Center block, but align contents to the left
Emily Wong 
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.
9 Answers
First, create a parent div that centers its child content with text-align: center. Next, create a child div that uses display: inline-block to adapt to the width of its children and text-align: left to make the content it holds align to the left as desired.
<div> <div> Centered<br /> Content<br /> That<br /> Is<br /> Left<br /> Aligned </div>
</div>If you wish to ensure that a long line does not widen everything too much, you may also apply the max-width property (with a value of your choice) to the inner tag:
max-width: 250px;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 ...
<body>
<div> <div> 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
3If 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;I've found the easiest way to centre and left-align text inside a container is the following:
HTML:
<div> <p>Some interesting text.</p>
</div>CSS:
P { width: 50%; //or whatever looks best margin: auto; //top and bottom margin can be added for aesthetic effect
}Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution.
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
3<div> <div> <pre>
Hello
Testing
Beep </pre> </div>
</div>Is this what you are looking for? Flexbox...
.container{ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center;
}
.inside{ height:100px; width:100px; background:gray; border:1px solid;
}<section> <section> A </section> <section> B </section> <section> C </section>
</section>For those of us still working with older browsers, here's some extended backwards compatibility:
<div> <div> Line 1: Testing<br> Line 2: More testing<br> Line 3: Even more testing<br> </div>
</div>Partially inspired by this post: .
THIS works
<div> <ul> <li><span>❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li> <li><span>❷</span> YouTube.com website <em>video search text box</em>.</li> <li><span>❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li> <li><span>❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li> </ul>
</div>
