This tutorial will explain how to place HTML Entities along the border of the screen.
In this tutorial you will learn about:
Positioning HTML components
Last updated on:
August 08, 2015
First, we will create a new HTML Entity. We do this by clicking Create Entity in the top bar. Next, we choose the HTML Entity inside the list.
An HTML Entity is inserted into the scene. By default, the HTML Entity will be placed in 3D space and update its transform according to its entity position. For our case, we just want to position things relative to the screen, so we uncheck the ‘Move with Transform’ checkbox.
In order to have our buttons align with the sides of the screen, inside the HTML Entity code, we’ll need to set the CSS style and positioning for each button. We do this by clicking the button ‘Open in Editor’:
Once the editor is open clear out the existing code and replace it with the following:
This will give us nine buttons with different alignment. Note that to center horizontally, we used width and a margin-left set to half of the width but negative. Play around with the buttons and classes and find one that fits your needs!