即使包装了左对齐文字，我该如何居中？

我需要将一个左对齐文本块放在div中间，但我需要将文本块的视觉宽度居中，而不是块本身。即使包装了左对齐文字，我该如何居中？

在许多情况下，这可能是同样的事情，但想到的情况下，其中的DIV是相当狭窄的（想想移动宽度）和文本是太长，无法在同一行，所以它需要溢出。

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

enter image description here

在1A，文字是只有一条线，它是比文本块的最大宽度小，所以可以将文本块设置为文本的宽度和有ISN没问题。

2a但是，文本比最大宽度更长，因此会换行到下一行。这样做的效果是可见文本块不会再出现居中。

我怎么能显示这两种情况下，作为1B和2B仅使用HTML和CSS？

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

编辑2：我使用的代码基本上是一样的东西给了大卫在他的链接（http://jsfiddle.net/davidThomas/28aef/）。文本区域使用的颜色只是为了说明这一点。如果您更改为白色（http://jsfiddle.net/28aef/2/），你可以看到文本块看起来不再为中心（即左，右页边距不相等）

来源

2012-01-02 JohnGB

那么......居中容器中的左对齐文本？这可能是困难的，只是* html和css，因为你似乎也希望文本垂直居中。 – 2012-01-02 15:58:17

@DavidThomas：如果你知道在JS中做这个简单的方法，我会认为它是一个备份选项，但如果可能的话，我想避免它。 – JohnGB 2012-01-02 16:09:09

你在用什么html？ – 2012-01-02 16:13:30

-3

<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是您的包含元素。你需要文字对齐中心。

然后，在你的块格（蓝色区域），你需要显示左内联和文本对齐，然后设置一个边距（您想保持它周围的文本包裹在白色的空间）。

来源

2012-01-02 16:02:35 James

这会给我确切的情况，我在1a和2a中就有这个问题。 – JohnGB 2012-01-02 16:06:14

不，只要您将此宽度设置为您不希望div超过的宽度，您就会好起来的。 div将看起来像2b。 – James 2012-01-02 16:09:04

文本换行时不起作用。在视觉上，文本区域的宽度（不是div区域）太远了。 – JohnGB 2012-01-02 16:12:23

我知道这是旧的，但我只是有同样的问题，我同意这些都解决它。这可能不是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; 
}

来源

2013-02-20 21:54:23 John

这是在Chrome上显示带有边框的左对齐文本。 – JohnGB 2016-07-13 14:29:34

尽管如此，它仍然不能完全集中**，这是这里的主要问题。 – 2017-01-27 02:55:18

我猜这早已成为一个非问题在原来的海报，但我有同样的问题，并使用Google找到答案。以下是我发现的结果。

免责声明：我不是专家在任何这和其他人可能有一个更优雅的方式来处理这种情况，但它的工作对我的应用程序，并可以适用于其他应用程序，所以我想我会张贴。

<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，几乎没有变化。根据需要定制百分比或指定像素宽度，并且应该全部设置。希望这可以在某个时候节省一些时间，并且不会产生任何新问题。祝你好运。

来源

2017-08-22 15:04:29 Lokipiece

你会在行动中展示一个这样的例子，因为它似乎没有回答原来的问题。 – JohnGB 2017-08-23 08:42:50

即使包装了左对齐文字，我该如何居中？

回答

相关问题