将两个按钮置于父 div 的子 div 中

Question

我正在使用 dat.gui.js 来获得带有 Three.js 的参数菜单。我想把这个菜单放在 main window 的右上角。此外，我想在此菜单底部添加 2 个按钮，它们必须水平居中并相对于父级 div.

如您所见，在 HTML 中，我有以下子结构和父结构 div：

<div id="webgl">
<div id="global-ui">
 <div id="gui">
 </div>
 <div id="buttons">       
         <button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start Animation</button>
         <button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
 </div>
 </div>
</div>

与 CSS 对应 #gui:

gui.domElement.id = 'gui';

对应于：

#global-ui {position: relative;}
#gui {position: absolute; top: 0; right: 0;}
#buttons {position: absolute; top: 200px;}

#global-ui div 表示 #gui div 和 #buttons div.

的父级 div

有了这个 css，我得到了下图：

我想得到这个：

正如您在第一张图片中看到的那样，存在两个问题：首先，即使 CSS“#gui {position: absolute; top: 0; right: 0;}"，DAT.GUI 也没有严格位于右侧和顶部。右边好像有空白

第二个问题，两个按钮相对于DAT.GUI没有居中，我尝试使用“margin: 0 auto;”或“text-align: center;”但没有成功。我想将它相对于 #gui div 容器以自动方式居中。

我该如何解决这两个问题？

Answer 1

至于控件右侧的间距，您的 #gui 元素的右边距为 15px，因此您可以通过将 margin-right:0; 添加到 CSS 规则来更正此问题#gui:

#gui {position: absolute; top: 0; right: 0; margin-right:0;}

关于居中对齐的元素，我在这里分解了：

理论

为了使 div 居中，使用 CSS 的方法是让子元素使用 margin-right 和 margin-left 都设置为 auto，并且父元素需要足够宽以填充您希望容器在其中居中的区域。

解决方案

容器的宽度（在本例中 #buttons）仅与其中的按钮一样宽，因此如果您要使按钮居中，则宽度不够只需这样做：

#button {
  margin-left: auto;
  margin-right: auto;
}

因此，必须增加宽度 #buttons 容器，使其与您需要的一样宽，在本例中，与 #gui 元素一样宽，但是这样做仍然不能让按钮居中，因为它们有两个，所以你需要一个包装器元素，它在里面创建 space 让按钮居中。这在 DOM:

中看起来像这样

<div id="buttons-wrapper">
  <div id="buttons">
    <button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start Animation</button>
    <button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
  </div>
</div>

然后#buttons-wrapper需要设置为#gui的宽度（按钮居中的space的目标宽度），#buttons需要设置宽度等于子容器#startButtonId和#resetButtonId之和，然后margin-right和margin-left最终可以应用到#buttons 它将按预期工作。

要动态设置宽度，您必须使用 JavaScript 并测量所需容器的宽度：

document.getElementById('buttons-wrapper').style.width = gui.width + 'px';
target_width = 5;  // a couple pixels extra
target_width = target_width + document.getElementById('startButtonId').offsetWidth;
target_width = target_width + document.getElementById('resetButtonId').offsetWidth;
document.getElementById('buttons').style.width = target_width + 'px';

我已将针对您的特定案例的完整解决方案放入此 fiddle：http://jsfiddle.net/bnbst5sc/4/

通用解决方案

一般情况下，它不在您的解决方案范围内：

#outer-wrapper {
  position: absolute;
  top: 100px;
  left: 150px;
  width: 300px;
  padding: 10px 0;
  background-color: #ff0000;
}
#inner-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 175px;
  padding: 10px 0;
  background-color: #00ff00;
}
button {
  display: inline-block;
  float: left;
}
#btn1 {
  background-color: #f0f000;
  width: 100px;
}
#btn2 {
  background-color: #00f0f0;
  width: 75px;
}

<div id="outer-wrapper">
  <!-- #outer-wrapper, has an arbitrary width -->
  <div id="inner-wrapper">
    <!-- #inner-wrapper, as wide as the sum of the widths of #btn1 and #btn2 and has margin-left and margin-right set to auto-->
    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
  </div>
</div>

将两个按钮置于父 div 的子 div 中

Centering two buttons into child div of a parent div

html

javascript

css

dat.gui

理论

解决方案

通用解决方案