将 three.js renderer.domElement (canvas) 在父 div 中居中

Question

我很难理解如何 'style' html div.

中的 threejs 渲染器的输出

例如这里有一个简单的场景：

html:

<div id="myPlanet"></div>

css:

body {
background : #000;
padding : 50px;
margin : 0;
}
#myPlanet {
width : 400px;
min-height: 400px;
margin : auto;
}

和 js 的摘录：

// The WIDTH of the scene to render
var __WIDTH__  = 400,

// The HEIGHT ot the scene to render
__HEIGHT__ = 400,
// We need to define the size of the renderer
renderer.setSize(__WIDTH__, __HEIGHT__);

// Let's attach our rendering zone to our page
document.getElementById("myPlanet").appendChild(renderer.domElement);

如果元素宽度（在 css 中）与呈现器宽度完全匹配，则在生成的页面中输出完全居中。但是当 div 'myplanet' 扩展（宽度）超过渲染器的 400px 时，（即将 css 规则更改为 600px 宽度或 100%），jstree 输出然后就位于元素左侧。

这怎么居中呢？在 css 中，您必须创建一个特殊的规则案例（例如 #myplanet img 或其他），然后您可以设置样式吗？我已经尝试将 'margin : 0 auto;' 放入 myplanet 规则中，但它仍然不会使输出居中

Answer 1

<canvas> 元素默认被视为内联对象，类似于 <img> 元素。这使得可以使用 float:left; 或 float:right; 属性混合文本和图像。我在父 div 和透明红色背景中添加了一些文本以展示此行为。

在这种情况下，您有两种选择。

1) 为 canvas 元素设置 margin: auto 还指定 canvas 应被浏览器的页面呈现引擎视为块元素。

#canvas{
    display: block;
    margin: 0 auto;
}

你明白了：

2)为父级设置text-align: centerdiv

您可以选择指定内联元素的垂直对齐方式属性。

#myPlanet{
    text-align: center;
   /* vertical-align: middle; */
}

我强烈推荐第一个选项。

将 three.js renderer.domElement (canvas) 在父 div 中居中

Centering three.js renderer.domElement (canvas) inside a parent div

css

three.js