Question

我正在尝试使用experimental向Dat GUI项目添加一些控件。我非常喜欢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;
}

Answer 1

试试这个：

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

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

Answer 2

尝试：添加div，它是dat.GUI元素的容器

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

然后在代码中

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);
}

请注意，-75px中的transform:translate(-50%, -75px);表示gui.domElement没有height属性，您可以将y轴的平移设置为大约其高度的一半，如您所见在屏幕上。

jsfiddle示例

Dat GUI - 菜单的大小和位置（javascript / css）

2 个答案: