我是HTML5的新手，我正在尝试用jmol图像编写网页。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="JSmol.lite.js"></script>
<script type="text/javascript">
var Info;;(
function()
{
Info =
{
width: 500,
height: 500,
debug: false,
color: "0xC0C0C0",
addSelectionOptions: true,
serverURL: "",
use: "HTML5",
readyFunction: null,
defaultModel: ":serotonine",
bondWidth: 4,
zoomScaling: 1.5,
pinchScaling: 2.0,
mouseDragFactor: 0.5,
touchDragFactor: 0.15,
multipleBondSpacing: 4,
spinRateX: 0.2,
spinRateY: 0.5,
spinFPS: 20,
spin:false,
}
}
)();
</script>
我将此代码添加到HTML的
<head>中，然后在需要插入分子图像的位置添加以下代码。<script id="java">
Jmol.getTMApplet("jmol", Info)
</script>
但是，无论我做什么，我都无法将jmol图片放在页面中心。我尝试在
<script>标记中使用类或id，然后在CSS中添加display: block;和text-align: center;。我也尝试过margin: auto;。但是似乎没有任何作用，jmol图像保留在网页的左端。在jmol图像上使用inspect元素可以得出：
<div id="jmol_appletinfotablediv" style="width:500px;height:500px;position:relative;font-size:14px;text-align:left">
<div id="jmol_appletdiv" style="z-index: 9000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: block;">
<canvas style="width: 100%; height: 100%;" width="500" height="500" id="jmol_canvas2d"></canvas></div>
<div id="jmol_2dappletdiv" style="position:absolute;width:100%;height:100%;overflow:hidden;display:none"></div>
<div id="jmol_infotablediv" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none;">
<div id="jmol_infoheaderdiv" style="height: 20px; width: 100%; background: yellow none repeat scroll 0% 0%; display: none;">
<span id="jmol_infoheaderspan">Jmol._Canvas2D (TwirlyMol) "jmol"</span>
<span id="jmol_infocheckboxspan" style="position:absolute;text-align:right;right:1px;">
<a href="javascript:Jmol.showInfo(jmol,false)">[x]</a>
</span></div>
<div id="jmol_infodiv" style="position:absolute;top:20px;bottom:0px;width:100%;height:100%;overflow:auto"></div></div></div>
如果您尚未注意到，我正在使用轻量级的jmol。我是一名化学家，并且我没有太多的编码经验，所以简单的解决方案会更好。
最佳答案
HTML中的脚本标签未呈现在页面上，它们只是执行其中的任何javascript。因此，将样式应用于<script>元素不会执行任何操作。
您需要弄清楚Jmol.getTMApplet("jmol", Info)在何处（即在哪个div或元素中）呈现分子。
如何知道：
在浏览器中，右键单击该分子，然后选择“检查元素”。然后，您将知道分子在哪个div / element中渲染。
找到正确的元素后，例如将“ java”的ID添加到该元素。
**编辑：**刚注意到您编辑了问题，所以我们要处理的元素是ID为"jmol_appletinfotablediv"的元素
然后使用CSS，将margin:auto和/或text-align:center应用于具有正确ID的span元素。