Html 即使文本换行，我如何将左对齐文本居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8702802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I centre left aligned text even when it wraps?
提问by JohnGB
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.
在许多情况下，这可能是同一件事，但考虑一下 div 相当窄（想想移动宽度）并且文本太长而无法在一行中容纳的情况，因此需要溢出。
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.
在下面的示例中，我将文本块显示为浅蓝色以进行说明，但实际上它们将与父 div 的颜色相同（白色）。在使用的任何文本中也没有换行符。
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.
在1a 中，文本只有一行并且小于文本块的最大宽度，因此我可以将文本块设置为文本的宽度，没有问题。
In 2ahowever, 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.
然而，在2a中，文本比最大宽度长，因此换行到下一行。这样做的效果是可见文本块不再居中显示。
How can I display both of these situations as 1band 2bonly using HTML and CSS?
如何仅使用 HTML 和 CSS将这两种情况显示为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.
编辑 1：似乎每个人都在告诉我如何实现 1a 和 2a 中的情况，但我已经有了。我想实现1b和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)
编辑 2：我使用的代码与 David 在他的链接（http://jsfiddle.net/davidThomas/28aef/）中给出的代码基本相同。文本区域使用颜色只是为了说明这一点。如果您将其更改为白色（http://jsfiddle.net/28aef/2/），您可以看到文本块如何不再居中（即左右边距不相等）
回答by John
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!
我知道这很旧，但我遇到了同样的问题，我同意这些都不能解决问题。这可能不是 100% 跨浏览器（尚未完成测试），但它有效！
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.
现在的限制是你必须自己放置换行符，但在这种情况下，这似乎是需要做的。
div.textContainer {
text-align: center;
border: 1px solid #000;
height: 100px;
padding: 10px 0;
}
div.textContainer p {
display: inline-block;
text-align: left;
}
回答by kwaaui
Flexbox may be good to go:
Flexbox 可能不错：
.d-flex {
display: -ms-flexbox;
display: flex;
}
.flex-column {
-ms-flex-direction: column;
flex-direction: column;
}
.ml-auto, .mx-auto {
margin-left: auto;
}
mr-auto, .mx-auto {
margin-right: auto;
}
.w-50 {
width: 50%;
}<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>回答by Lokipiece
I'm guessing this has long since become a non-issue for the original poster but I had the same question and was googling to find an answer. Below is the result of what I found.
我猜这早已成为原始海报的非问题，但我有同样的问题并且正在谷歌上寻找答案。下面是我发现的结果。
Disclaimer: I'm not an expert at any of this and others may have a more elegant way to handle this situation but it worked for my application and may work for other applications so I figured I'd post it.
免责声明：我不是这方面的专家，其他人可能有一种更优雅的方法来处理这种情况，但它适用于我的应用程序并且可能适用于其他应用程序，所以我想我会发布它。
<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>
Note that in the above the first div may not be needed and the margins can be moved to the second div with little change. Tailor, as needed, on the percentages or specify a pixel width and you should be all set. Hopefully this saves someone some time at some point and doesn't create any new issues. Best of luck all.
请注意，在上面的第一个 div 中可能不需要，并且可以将边距移动到第二个 div 几乎没有变化。根据需要定制百分比或指定像素宽度，您应该都设置好了。希望这可以在某些时候为某人节省一些时间并且不会产生任何新问题。祝大家好运。
回答by JSG
I know this is old but it has not been answered. It can be done with calc()vh and vw(viewport units), at least, and some math. The trick seems to be setting the left and top to center manually somewhat. I used viewport units for their accuracy and ever changing effect.
我知道这是旧的，但尚未得到答复。至少可以使用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>I was looking for a solution to center and resize my text containing DIV on window resize. I ran across this post and found my workaround after realizing there was an issue using the regular CENTER method. I hope it helps.
我正在寻找一种解决方案，在窗口调整大小时居中并调整包含 DIV 的文本的大小。在意识到使用常规 CENTER 方法存在问题后，我浏览了这篇文章并找到了我的解决方法。我希望它有帮助。
回答by James
<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>
Basically, the first div is your containing element. You need to text-align center.
基本上，第一个 div 是您的包含元素。您需要将文本居中对齐。
Then, in your block div (the blue area), you need to display inline and text align left, then set a margin (the white space you want to remain around it when the text wraps).
然后，在您的块 div（蓝色区域）中，您需要显示内联和文本左对齐，然后设置一个边距（文本换行时您希望在其周围保留的空白区域）。
