【问题标题】：How do I have left-aligned text in the center of a div?如何在 div 的中心左对齐文本？
【发布时间】：2016-08-21 05:09:35
【问题描述】：

我想知道是否有人知道如何将左对齐的文本居中。这是我的意思的一个例子：

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>

【问题讨论】：

标签： html css text-alignment

【解决方案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 的中心。我该怎么做？

根据您的修改要求（在 cmets 中），我会使用 flexbox 来避免必须添加额外的包装器。

带有所需附加包装器的演示：Codepen 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 U.S. 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>

【讨论】：

删除浮动只是使 div 居中，而不是文本。我已经更新了代码笔，因为它最初只有一个 div，而不是现在的 3，所以你可以看到删除 float 并不能解决我的问题。
这就是为什么我有 3 个子 div？我希望三个子 div 中的每一个中的文本左对齐，但仍位于其 div 的中心。我该怎么做？
在您的代码笔上，我希望这 3 个子 div 在网页宽度上均匀分布
我曾考虑过使用 flex，但我试图至少与 IE7 保持兼容，因为访问该站点的大多数人都是老一代。见：caniuse.com/#search=flex
那么你需要额外的包装器......在更新的答案中查看我的 Codepen。但“老一代”并不意味着老一代。