gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:28:19 24 4
gpt4 key购买 nike

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

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

最佳答案

在div中包装游览文本区域

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

CSS:

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

关于html - 代码镜像生成的textarea难以居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31692987/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com