Question

我为我的烧瓶应用程序编写了以下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>

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

Answer 1

在div中包裹tour textarea

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

的CSS：

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

难以使代码镜像生成的textarea居中

1 个答案: