数据GUI -菜单的大小和位置(javascript / css)

Dat GUI - size and position of menu (javascript / css)

本文关键字：位置 javascript css GUI 菜单 数据      更新时间：2023-09-26

我试图使用数据GUI添加一些控件到Three.js项目。我非常喜欢Dat GUI提供的控件的外观和感觉。但是，我在页面内定位菜单时遇到了一些问题。我真的需要水平和垂直地将菜单居中，并为菜单设置自定义宽度和高度。这肯定是可能的吧?

目前我正在尝试以下内容。菜单几乎是水平居中，所以有些东西正在工作。但它不是垂直居中(它只是粘在页面的顶部)和菜单的大小没有改变(宽度和高度参数没有影响)。

有谁能帮我一下吗?javascript: 

var gui;
var MenuClass = function() 
{
    this.speed = 0.5;
};
var theMenu = new MenuClass();
gui = new dat.GUI();
gui.domElement.id = 'gui_css';
gui.add(theMenu, 'speed', -5, 5);
css: 

#gui_css 
{    
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
}

尝试:添加一个div，它是您的数据的容器。GUI元素

<div id="gui_container"></div>

then in code

var gui = new dat.GUI({ autoPlace: false });
gui.domElement.id = 'gui';
gui_container.appendChild(gui.domElement);

和样式

#gui_container{
  position: absolute;
  top: 50%;
  left: 50%;
}
#gui{
  transform:translate(-50%, -75px);
}

请注意，transform:translate(-50%, -75px);中的-75px意味着gui.domElement没有height属性，并且您通过y轴设置平移大约是其高度的一半，正如您在屏幕上看到的那样。

jsfiddle示例

try this: 

    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;

这将使元素在水平和垂直方向居中，只要它有宽度和高度，否则它将拉伸元素。

相关文章：