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

Question

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

59

请原谅我提出这样一个简单的问题，我对HTML和CSS都很陌生。有没有一种简单的方法来居中一个文本框？我想试试使用

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

但它（显然？）没有起作用。

- Chris

5个回答

11

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

HTML：

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

CSS：

div { text-align: center; }

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

- davehauser

谢谢您的快速回复！我已经为div元素分配了一些颜色和其他属性，但是如何获取一个只有text-align:center;属性的元素呢？ - Chris

@Chris -- 只需将 text-align:center; 添加到您当前 <div> 的 css 声明中即可。 :-) - Sean Vieira

你可以将所有样式添加到同一个 div 中（颜色、字体、文本对齐等），这不是你想要的吗？ - davehauser

我实际上想要从 div 中删除样式，这样它们就不会应用于 textarea 上，但也许这并不需要（我认为它会形成一个带有背景颜色和填充的框，就像我的 div 一样）？ - Chris

它们不适用于文本区域，您可以将它们保持原样。 - davehauser

2

将display: block;添加到您的文本框样式中。

- Jeff Adams

嘿，那个方法起作用了，就像你说的那样，再加上我已经有的样式。谢谢！ - Chris

1

<!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 包裹住你的文本域，给它设置宽度，然后使用 text-align:center; 居中对齐。

- Sotiris

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

0

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

textarea {
    margin: auto;
    display: block;
}

- CaptainGenesisX

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Douglas · Accepted Answer

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

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

before and after

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

您还可以通过将文本区域放在类似于flexbox容器中来使其居中显示，像这样：

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

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