对齐并居中 <textarea> 文本 HTML/CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25413143/
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
Justify and Center <textarea> text HTML/CSS?
提问by James Hewitt
I have a textarea and I want it to be justified so all the lines are equal in width and to be centered to the text stays in the middle of the textarea when it's not at maximum line length.
我有一个 textarea 并且我希望它是合理的，因此所有行的宽度都相等，并且当文本不在最大行长度时，以文本为中心保持在 textarea 的中间。
This is my textarea:
这是我的文本区域：
<textarea class="Whiteboard" type="text" placeholder="Type something..."></textarea>
...and the CSS:
...和CSS：
textarea.Whiteboard{
resize: none;
background-color: #F1F1F1;
border: none;
height: 500px;
width: 800px;
text-align: center;
font-size: 50px;
}
Thank you all!
谢谢你们！
回答by Hashem Qolami
Unfortunately there is no concrete CSS solution at the time of writing to achieve the desired result.
不幸的是，在撰写本文时还没有具体的 CSS 解决方案来实现预期的结果。
However CSS level 3 has introduced a feature under the name text-align-lastto handle the alignment of the last line of a block:
然而，CSS 级别 3 在名称下引入了一个功能text-align-last来处理块的最后一行的对齐：
7.3 Last Line Alignment: the text-align-last property
This property describes how the last line of a block or a line right before a forced line break is aligned.
此属性描述了块的最后一行或强制换行之前的一行的对齐方式。
But it is still in Working Draftstate. Hence the browser support is not good enough to rely on this technology (It's still buggy on Chrome 35and only works on Firefox 12+).
但它仍处于工作草案状态。因此浏览器支持不足以依赖这项技术（它在 Chrome 35上仍然有问题，仅适用于 Firefox 12+）。
Here is an examplewhich I'm not able to verify (because of my FF4. Yes! shame on me):
这是一个我无法验证的示例（因为我的 FF4。是的！真丢脸）：
textarea {
white-space: normal;
text-align: justify;
-moz-text-align-last: center; /* Firefox 12+ */
text-align-last: center;
}
回答by Kamil Kie?czewski
Alternative: use contenteditable
替代方案：使用 contenteditable
.container {
width: 100px;
height: 150px;
background: #eee;
display:flex;
align-items: center;
justify-content: center;
}
.text {
text-align: center;
word-break: break-all;
margin: 10px;
}<div class="container">
<div class="text" contenteditable=true>click here and edit</div>
</div>回答by Paul Latour
In order to center the textarea element, you have to declare it as a block element in CSS and then add typical centering rules, if necessary.
为了使 textarea 元素居中，您必须在 CSS 中将其声明为块元素，然后在必要时添加典型的居中规则。
textarea { display: block; margin: 0 auto; }
I was looking for an answer to this and could not find out what I was looking for; hence this post.
我正在寻找这个问题的答案，但找不到我要找的东西；因此这篇文章。
