CSS: center content with text left alignment

How to centralize content on a div but with left text alignment on CSS?

First: center content

It’ necessary create a div that will center the content. Follow the necessary css properties bellow:

1
text-align: center;

Second: inline block the text with left alignment

All the text needs to be inside a div with the following CSS properties:

1
2
display: inline-block;
text-align: left;

HTML example:
1
2
3
4
5
6
<div style="background-color:#ccc;text-align:center;">
    <div style="display:inline-block;text-align:left">
        <h4>Foo</h4>
        <p>That's nice!</p>
    </div>
</div>
Result:


Foo


That’s nice!



IMPORTANT: note that the text needs to be smaller than block to has the effect