如何在div的中心向左對齊文本？

Question

我想知道是否有人知道如何居中對齊文本。 這是我的意思的示例：

This text
is
left aligned.

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

如何在div內執行此操作？ 我已經嘗試了一個我在所有地方都看到的答案，即將text-align：center放在父div中，然后在子div中將text-align：left放進去，但這似乎行不通。 這是一個示例： 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

我想知道是否有人知道如何居中對齊文本。

只需從“居中”子項中刪除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> 

我希望三個子div中的每個文本保持左對齊，但仍位於其div的中心。 我該怎么做？

根據您的修訂要求（在注釋中），我將使用flexbox以避免必須添加其他包裝。

帶有附加包裝的演示 ： Codepen演示

Flexbox演示：

 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>