代码镜像生成的文本区域难以居中答案

【问题标题】：Difficulty centering textarea generated by code mirror代码镜像生成的文本区域难以居中
【发布时间】：2015-10-19 23:50:42
【问题描述】：

我为我的烧瓶应用程序编写了以下 jinja2 html 文件来呈现：

<!DOCTYPE html>
<html lang='en-US'>
  <head>
    <style type='text/css' media='screen'>
      body {
        background-image: url( {{ url_for('static', filename='img/background.png') }} );
      }

      textarea {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>

    <script src={{ url_for('static', filename='script/CodeMirror/lib/codemirror.js') }}></script>
    <link rel="stylesheet" href={{ url_for('static', filename='script/CodeMirror/lib/codemirror.css') }}>
  </head>

  <body>
    <title>icc eval webapp</title>

    <textarea id="text" rows="4" cols="10"></textarea>

    <script>
      var codeMirror = CodeMirror.fromTextArea(document.getElementById("text"), {
        value: '(32.3333333333+1.6666667)/7-0.8571426+(5^2*2)-12.0000002619',
        lineNumbers: true,
        lineWrapping: true,
        fixedGutter: true,
        showCursorWhenSelecting: true,
        cursorHeight: 0.85
      });

      codeMirror.setSize(800, 400);
    </script>
  </body>
</html>

不幸的是，我似乎无法到达中心位置。它一直显示在页面的左侧，我希望它位于中心，两侧和上方都有很大的边距。任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： html css python-2.7 flask jinja2

【解决方案1】：

在 div 中包装游览文本区域

<div class="test">
   <textarea id="text" rows="4" cols="10"></textarea>
</div>

css:

.test {
   width: 100%;
   text-align: center;
   margin: 0 auto;
}

【讨论】：