即使在包装时，我如何居中左对齐的文本？ [英] How can I centre left aligned text even when it wraps?

问题描述

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

在许多情况下，这可能是相同的事情，但是想到一个情况，其中div是相当狭窄的（认为移动宽度），文本太长，不适合在一行，因此它需要溢出。

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

在 中，文本只有一行，小于文本块的最大宽度，因此我可以将文本块设置为文本的宽度，没有问题。

在 2a 比最大宽度长，所以包装到下一行。

如何显示这两种情况： 1b 只是使用HTML和CSS？

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

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

解决方案

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

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.

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.

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.

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.

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

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.

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)

解决方案

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屋！