如何使用 CSS 使文本区域居中？答案

【问题标题】：How to center a textarea using CSS?如何使用 CSS 使文本区域居中？
【发布时间】：2011-04-04 13:12:09
【问题描述】：

请原谅我问了这么简单的问题，我对 HTML 和 CSS 都是新手。有没有一种简单的方法可以使文本区域居中？我想我会尝试使用

textarea{
    margin-left: auto;
    margin-right: auto;
}

但它（显然？）没有用。

【问题讨论】：

标签： html css textarea center

【解决方案1】：

边距不会影响文本区域，因为它不是块级元素，但如果你愿意，你可以让它显示块：

textarea {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

默认情况下，textareas 是 display: inline，这就是为什么您可以轻松地将它们并排放置，以及为什么 text-align: center 答案也有效。

文本区域也可以通过将其放在flexbox container 中来居中，如下所示：

<style>
    div.justified {
        display: flex;
        justify-content: center;
    }
</style>

<div class="justified">
    <textarea>Textarea</textarea>
</div>

【讨论】：

这是我现在正在使用的，你知道它是否有什么不好的地方（因为它听起来太容易成为真实/好;-)）？
不，我不知道有什么缺点。
一个缺点是当 textarea 调整大小时（通过拖动调整大小手柄），它不再调整到中心。（至少在 Chrome 上）。

【解决方案2】：

将元素父级的text-align设置为center，如下所示：

HTML：

<div>
    <textarea></textarea>
<div>

CSS：

div { text-align: center; }

这里是一个例子：http://jsfiddle.net/ujzLt/

【讨论】：

感谢您的快速回复！我已经为 div 元素分配了一些颜色和其他东西，我如何获得一个只有 text-align:center; 的？
@Chris -- 只需将text-align:center; 添加到您当前的<div> 的css 声明中即可。 :-)
您可以将所有样式添加到同一个 div（颜色、字体系列、文本对齐...），或者这不是您的意思吗？
我实际上想从 div 中删除样式，这样它们就不会应用于 textarea，但也许这不是必需的（认为它会形成一个带有背景颜色和填充的框，就像我的div 有）？
它们不适用于文本区域，您可以保持原样。

【解决方案3】：

将display: block; 添加到您的文本区域样式

【讨论】：

嘿，成功了，结合我已经拥有的风格，就像你说的那样。谢谢！

【解决方案4】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>#container {width:100%; text-align:center;}</style>
</head>

<body>
<div id="container">
<textarea name="mytextarea" cols="10" rows="10"></textarea>
</div>
</body>
</html>

你用一个div包裹你的textarea，给它宽度，然后你用text-align:center;对齐它

【讨论】：

非常感谢:-)！但是，就像我上面解释的那样，我已经让我的 div 更漂亮了，我该如何回到只有文本对齐的默认值？

【解决方案5】：

这应该可以解决问题。它在 2020 年对我有用：

textarea {
    margin: auto;
    display: block;
}

【讨论】：