Question

我是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图像上使用检查元素可以得出：

<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。我是化学家，并且我没有太多的编码经验，所以简单的解决方案会更好。

Answer 1

如果要使元素居中：

水平和垂直：

.parent {
  position: relative;
}
#jmol_appletinfotablediv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在您的情况下，尚不清楚#jmol_appletinfotablediv div标签的父级。查看嵌套位置，然后将.parent替换为实际的父级

水平居中

#jmol_appletinfotablediv {
  margin: 0 auto;
}

垂直

.parent {
  position: relative;
}
#jmol_appletinfotablediv{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

与水平和垂直中心居中的情况相同，请将.parent替换为实际的父级。

如果这两种方法都不适合您，则很可能生成的HTML内联了CSS，它将覆盖您的CSS规则。我以前没有尝试过JMol，如果这样做没有帮助，我会再看看。

欢呼

Answer 2

HTML中的脚本标记未呈现在页面上，它们只是执行其中的任何javascript。因此，将样式应用于<script>元素不会做任何事情。

您需要弄清楚Jmol.getTMApplet("jmol", Info)在何处（即在哪个div或元素中）呈现分子。

如何知道：

在浏览器中，右键单击分子，然后选择“检查元素”。然后，您将知道分子在哪个div / element中呈现。

找到正确的元素后，请在该元素中添加例如“ java”的ID。

**编辑：**刚注意到您编辑了问题，因此我们要处理的元素是ID为"jmol_appletinfotablediv"的元素

然后使用CSS，将margin:auto和/或text-align:center应用于具有正确ID的span元素。

如何居中由javascript生成的对象？

2 个答案: