如何在div的中心向左对齐文本？

Question

I was wondering if anybody knows how to center text that is left aligned. Here's an example of what I mean:

This text
is
left aligned.

                                  This text
                                  is
                                  left aligned
                                  and in
                                  the center (isn).

How can I do that inside a div? I've tried the one answer I've seen everywhere which is to put text-align:center in a parent div and then in the child div put text-align: left, but this does not seem to work. Here is an example: http://codepen.io/nrojina0/pen/OXGdXJ

 div#stores { font-size: 1.25em; width: 100%; text-align: center; border: 1px solid black; } div#storesleft { display: inline-block; float: left; width: 33%; text-align: left; margin: 0 auto; border: 1px solid black; } 

 <div id="stores"> <div id="storesleft"> Boo and Roo's <br>112 E. Moore St. <br>Southport, NC 28461 <br>(910)363-4275 <br> </div> </div> 

Answer 1

I was wondering if anybody knows how to center text that is left aligned.

Just remove the float from the "centered" child..

"The first rule of centering is...don't use float!"

 div#stores { font-size: 1.25em; width: 100%; text-align: center; padding: 1em; } div#storesleft { display: inline-block; width: 33%; text-align: left; margin: 0 auto; } 

 <div id="stores"> <div id="storesleft"> Boo and Roo's <br>112 E. Moore St. <br>Southport, NC 28461 <br>(910)363-4275 <br> </div> </div> 

I want the text in each of the three child divs to be left aligned, but still in the center of their div. How would I do that?

From your amended requirements (in the comments) I'd use flexbox to avoid have to add additional wrappers.

Demo with required additional wrappers : Codepen Demo

Flexbox Demo:

 div#stores { font-size: .85em; width: 100%; display: flex; justify-content: space-around; } div#storesleft { border: 1px solid black; } div#storescenter { border: 1px solid black; } div#storesright { border: 1px solid black; } 

 <div id="stores"> <div id="storesleft"> Boo and Roo's <br>112 E. Moore St. <br>Southport, NC 28461 <br>(910)363-4275 <br> </div> <div id="storescenter"> Natural Food Store <br>1920 US Hwy 70 SW <br>Hickory, NC 28602 <br>(828)322-5316 <br> </div> <div id="storesright"> Routh's Grocery <br>3796 Chatham Street <br>Bennett, NC 27208 <br>(336)581-3465 <br> </div> </div>