对齐和居中文本HTML / CSS？

Question

我有一个textarea，我希望它是合理的，所以所有的行宽度相等，并且当文本不在最大行长度时，文本停留在textarea的中间。

这是我的textarea：

<textarea class="Whiteboard" type="text" placeholder="Type something..."></textarea>

......和CSS：

textarea.Whiteboard{
    resize: none;
    background-color: #F1F1F1;
    border: none;
    height: 500px;
    width: 800px;
    text-align: center;
    font-size: 50px;
}

谢谢你们！

Answer 1

遗憾的是，在编写本文时没有具体的CSS解决方案来实现所需的结果。

然而，CSS级别3引入了一个名为text-align-last的功能来处理块的最后一行的对齐：

7.3 Last Line Alignment: the text-align-last property

此属性描述了块的最后一行或强制换行符之前的行是如何对齐的。

但它仍处于工作草案状态。因此，浏览器支持不足以依赖这项技术（它仍然是buggy on Chrome 35，仅适用于Firefox 12+）。

这是一个我无法验证的example（因为我的FF4。是的！对我感到羞耻）：

textarea {
    white-space: normal;
    text-align: justify;
    -moz-text-align-last: center; /* Firefox 12+ */
    text-align-last: center;
}

Answer 2

替代方案：使用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>

Answer 3

为了使textarea元素居中，您必须将其声明为CSS中的块元素，然后根据需要添加典型的居中规则。

textarea { display: block; margin: 0 auto; }

我一直在寻找答案，但却找不到我要找的东西;因此这篇文章。