如何对齐 canvas 旁边的文本和按钮 (WebGL + JavaScript + CSS)

Question

我有一个带有 canvas 的网页，用于实现图形渲染，我想将一些文本和按钮对齐到它的左侧。我的HTML代码如下：

<body onload="webGLStart();">
    <canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
    <div class="controls">
        <h2>Controls</h2>
        <button class="btn" onclick="initBuffers(1)">Man</button>
        <br><br>Use the mouse to rotate the view.
    </div>
</body>

所以我要左对齐的是 'controls' class 中的所有内容。目前它显示在 canvas 下方的新行中。我希望它从与 canvas 相同的行开始向左对齐，canvas 保持居中。

我正在使用样式表，想知道如何使用 css 来实现它。

可以看到我的站点here。这是我想向上移动到页面顶部的控件部分。

非常感谢任何帮助，谢谢。

Answer 1

我建议您将其全部包装在一个包装器 div 中，该包装器居中并具有相对位置。然后你可以像这样绝对定位控件：

<div class="wrapper" style="margin: 0 auto; width: 800px; position: relative;">

   <canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>

   <div class="controls" style="position: absolute; top:0; left:0;">

       <h2>Controls</h2>

       <button class="btn" onclick="initBuffers(1)">Man</button>

       <br><br>Use the mouse to rotate the view.

   </div>

</div>

Answer 2

这是一个临时的答案。不过，我会使用 bootstrap 进行定位。您可以使用 bootstrap.

JSFiddle

是您要找的吗？使用 col-sm-{x/12} 调整您的头寸大小。

如何对齐 canvas 旁边的文本和按钮 (WebGL + JavaScript + CSS)

How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

html

javascript

css

webgl