我怎么能离开居中对齐文本时，它包装？ [英] How can I centre left aligned text even when it wraps?

问题描述

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

I need to centre a block of left aligned text within a div, but I need the visual width of the text block to be centred not the block itself.

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

In many cases this may be the same thing, but think of a case where the div is fairly narrow (think mobile widths) and the text is too long to fit on one line, so it needs to overflow.

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

In the examples below, I am showing the text block as light blue to illustrate, but in practice they will be the same colour as the parent div (white). There are also no line breaks in any text used.

在 1A 的，文字是只有一条线，它是比文本块的最大宽度，这样我就可以设置文本块文本的宽度和有ISN T A的问题。

In the 1a, the text is only one line and it is smaller than the maximum width of the text block, so I can set the text block to the width of the text and there isn't a problem.

在 2A 的但是，文本的长度超过了最大宽度，因此换到下一行。这样做的效果是明显的文本块没有居中了。

In 2a however, the text is longer than the maximum width and so wraps to the next line. The effect of this is that the visible text block doesn't appear centred any more.

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

How can I display both of these situations as 1b and 2b only using HTML and CSS?

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

Edit 1: It seems that everyone is telling me how to achieve the situation in 1a and 2a, but I already have that. I want to achieve the situation in 1b and 2b.

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

Edit 2: The code I'm using is essentially the same as what David gave in his link (http://jsfiddle.net/davidThomas/28aef/). The use of a colour for the text area is just to illustrate this point though. If you change that to white (http://jsfiddle.net/28aef/2/) you can see how the text block no longer looks centred (i.e. left and right margins aren't equal)

推荐答案

我知道这是老了，但我有同样的问题，我同意，没有这些解决它。这其中可能不是100％跨浏览器（有没有做过测试），但它的作品！

I know this is old, but I just had the same issue, and I agree that none of these solve it. This one may not be 100% cross-browser (haven't done testing) but it works!

现在的限制是，你必须把线路突破自己，但似乎这就是需要在这种情况下，无论做了。

Now the restriction is you have to put in the line-break yourself, but it seems that is what needs to be done regardless in this kind of situation.

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;
}

这篇关于我怎么能离开居中对齐文本时，它包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！