即使在包装时，如何将左对齐文本居中？

Question

我需要在div中居中一个左对齐文本块，但我需要将文本块的视觉宽度放在居中而不是块本身。

在很多情况下，这可能是一回事，但想想一个div相当狭窄（想想移动宽度）并且文本太长而无法放在一行上的情况，所以它需要溢出。

在下面的示例中，我将文本块显示为浅蓝色来说明，但实际上它们将与父div（白色）颜色相同。在使用的任何文本中也没有换行符。

在 1a 中，文本只有一行，并且小于文本块的最大宽度，所以我可以将文本块设置为文本的宽度，并且没有一个问题。

在 2a 中，文本比最大宽度长，因此包装到下一行。这样做的结果是可见文本块不再显示为居中。

如何仅使用HTML和CSS将这两种情况显示为 1b 和 2b ？

编辑1：似乎每个人都在告诉我如何实现1a和2a中的情况，但我已经拥有了。我想实现1b和2b的情况。

编辑2：我使用的代码与David在其链接中提供的代码（http://jsfiddle.net/davidThomas/28aef/）基本相同。对文本区域使用颜色只是为了说明这一点。如果将其更改为白色（http://jsfiddle.net/28aef/2/），您可以看到文本块不再看起来居中（即左右边距不相等）

Answer 1

我知道这是旧的，但我遇到了同样的问题，我同意这些问题都没有解决。这个可能不是100％跨浏览器（尚未完成测试）但它有效！

现在限制是你必须自己进行换行，但似乎无论在这种情况下都需要做什么。

http://jsfiddle.net/28aef/2/

div.textContainer {
    text-align: center;
    border: 1px solid #000;
    height: 100px;
    padding: 10px 0;
}

div.textContainer p {
    display: inline-block;
    text-align: left;
}

Answer 2

Flexbox可能不错：

  .d-flex {
      display: -ms-flexbox!important;
      display: flex!important;
  }
  .flex-column {
      -ms-flex-direction: column!important;
      flex-direction: column!important;
  }
  .ml-auto, .mx-auto {
      margin-left: auto!important;
  }
  mr-auto, .mx-auto {
      margin-right: auto!important;
  }
  .w-50 {
      width: 50%!important;
  }

<div class="d-flex flex-column mx-auto w-50">
  <p>Left aligned text</p>
  <p><em>Aenean sed lectus massa, quis fringilla magna. Morbiporta sapien quis ligula viverra condimentum non vel nunc. Ut ac pulvinar nibh. Sed vitae eros et purus ullamcorper fermentum eu a libero. Curabitur vitae dolor ligula, varius tincidunt arcu. Quisque lectus magna, semper sed tincidunt nec, mattis vel justo.</em></p>
  <p>Using <a href="https://getbootstrap.com/docs/4.1/utilities/flex/">Bootstrap 4</a> classes.</p>
</div>

Answer 3

我猜这已经成为原始海报的一个非问题，但我有同样的问题，并谷歌搜索找到答案。以下是我发现的结果。

免责声明：我不是这方面的专家，其他人可能有更优雅的方式来处理这种情况，但它适用于我的应用程序，可能适用于其他应用程序，所以我想我会发布它。

<div style = "text-align: center; margin-left: 10%; margin-right: 10%">
    <div style = "display: inline-block; text-align: left;">
        Desired text goes here.
    </div>
</div>

请注意，在上面可能不需要第一个div，并且边距可以移动到第二个div而几乎没有变化。根据需要定制百分比或指定像素宽度，您应该全部设置。希望这可以节省某些时间，并且不会产生任何新问题。祝你好运。

Answer 4

我知道这已经过时但尚未得到解答。它可以使用calc() vh和vw（视口单元），至少和一些数学来完成。 诀窍似乎是将左侧和顶部设置为手动中心。我使用了视口单元的准确性和不断变化的效果。

    .clr	{ clear:both; }
    .bg666	{ background:#666;}  
    .bgf4	{ background: #f4f4f4; }
    .hv60	{ height: 60vh; }
    .hv50	{ height: 50vh; }
    .wv60	{ width: 60vw; }
    .wv50	{ width: 50vw; }
    .tlset	{ position:relative; left: 30px; top: 30px; }
    .true_cntr_inner { position:relative; left: calc(60vw - 50vw - 5vw);  top: calc(60vh - 50vh - 5vh); } /* left = (60% - 50% of inner block / 2);*/

    <div class = 'clr wv60 hv60 bg666 tlset'>
        <div class = 'clr wv50 hv50 true_cntr_inner bgf4'>
            this is some text that spans acrossed 50% of the viewport. 
            I state the obvious because I believe people can see the obvious and I 
            was wrong a lot. Now it has become somewhat of a habit like bad spelling 
            so forgive me. 
        </div>
    </div>

我一直在寻找一个解决方案，以便在窗口调整大小时居中并调整包含DIV的文本。在发现使用常规CENTER方法存在问题后，我遇到了这篇文章并找到了我的解决方法。我希望它有所帮助。

Answer 5

<div style="text-align:center;">
    <div style="display:inline; text-align:left; margin:20px;"> <!-- or whatever width you want that block to be at -->
          Content here
     </div>
</div>

基本上，第一个div是你的包含元素。你需要文本对齐中心。

然后，在您的块div（蓝色区域）中，您需要向左显示内联和文本对齐，然后设置边距（文本换行时要保留在其周围的空白区域）。