How do you put text to the right or left of a canvas element?
I am trying to add text to the right and left of the canvas (black grid) shown in this picture, but no matter what I try it seems to put the text above or below it.
<div id="inputs">
<input id='slider' type="range" min=2 max=100 step=1>
Rows: <span id="choice"></span>
<input id='slider2' type="range" min=0 max=70 step = 0.5>
Percent of nodes to be walls: <span id="choice2"></span>
<input type="checkbox" id='Show Path' checked=true>Show Path
<input type="button" value="Clear Board" onclick="setup();">
<a href="controls.html" style="margin-left:30px">Controls</a>
</div>
<br>
<canvas id="canvas" width="700" height="700"></canvas>
Solution 1:
Not sure how much content you would like to add on the left/right of the canvas element but I would suggest something like:
<div class="container">
<div>Left text....</div>
<canvas id="canvas" width="700" height="700"></canvas>
<div>Right text....</div>
</div>
With the following CSS:
.container {display: flex; flex-direction: "row"; }
Solution 2:
Just needed to add some more css to make it within a line.
EDIT:
The revised snippet can now be run, with the new inline-block-centered class applied to the canvas and surrounding text.
(The canvas border is just to make the canvas visible in the snippet.)
/* This ruleset is just for the snippet. (IRL, reset to 700px) */
#canvas { width: 200px; height: 200px; border: 1px solid grey; }
/* This crucial ruleset puts the selected elements inline together */
.inline-block-centered { display: inline-block; vertical-align: middle; }
/* These rulesets are optional replacements for forced formatting in HTML */
#inputs { margin-bottom: 1em; }
#inputs > a { margin-left: 30px; }<div id="inputs">
<input id='slider' type="range" min=2 max=100 step=1>
Rows: <span id="choice"></span>
<input id='slider2' type="range" min=0 max=70 step = 0.5>
Percent of nodes to be walls: <span id="choice2"></span>
<input type="checkbox" id='Show Path' checked=true>Show Path
<input type="button" value="Clear Board" onclick="setup();">
<a href="controls.html">Controls</a>
</div>
<div class="inline-block-centered">
<span>Left text</span>
</div>
<canvas id="canvas" class="inline-block-centered"></canvas>
<div class="inline-block-centered">
<span>Right text</span>
</div>