如何使用 CSS 使文本区域居中？
Posted
技术标签:
【中文标题】如何使用 CSS 使文本区域居中？【英文标题】：How to center a textarea using CSS? 【发布时间】：2011-04-04 13:12:09 【问题描述】：请原谅我问了这么简单的问题，我对 html 和 CSS 都是新手。 有没有一种简单的方法可以使文本区域居中？我想我会尝试使用
textarea
margin-left: auto;
margin-right: auto;
但它（显然？）没有用。
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于如何使用 CSS 使文本区域居中？的主要内容，如果未能解决你的问题，请参考以下文章