如何使用CSS居中textarea?

原谅我提出这样一个简单的问题,我对HTML和CSS都是新手。 有一个简单的方法来居中textarea? 我想我只是尝试使用

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

但它(显然?)不起作用。

4 Solutions collect form web for “如何使用CSS居中textarea?”

边距不会影响文本区域,因为它不是块级别的元素,但是如果你喜欢,你可以使它显示块:

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

之前和之后

默认情况下,textareas是display: inline ,这就是为什么你可以很容易地把它们放在一起,为什么text-align: center工作。

textarea也可以放置在一个flexbox容器中,如下所示:

 <style> div.justified { display: flex; justify-content: center; } </style> <div class="justified"> <textarea>Textarea</textarea> </div> 

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

HTML:

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

CSS:

 div { text-align: center; } 

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

添加display: block; 到你的textarea样式

 <!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;

  • 如何修复Firefox和Chrome中不一致的Textarea底部边距?
  • 在textarea中计数字符
  • 为什么textarea充满了神秘的白色空间?
  • textarea字符限制
  • 在<Input type =“textarea”/>中多于1行
  • Chrome浏览器使用maxlength属性计算textarea中的字符错误
  • 在HTML textarea上模拟HTMLinput“maxlength”属性的最佳方法是什么?
  • jQuery - 从textarea中select所有文本
  • 限制textarea中的行数和使用jQuery显示行数
  • 我应该使用CSS宽度/高度或HTML cols / rows属性来设置textarea大小吗?
  • 在Html Textarea中设置maxlength