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

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

<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（蓝色区域）中，您需要显示内联和文本左对齐，然后设置边距（文本换行时要在其周围保留的空白）。