0
194
Views¿Cómo se coloca el texto a la derecha o a la izquierda de un elemento del lienzo?
Estoy tratando de agregar texto a la derecha y a la izquierda del lienzo (cuadrícula negra) que se muestra en esta imagen, pero no importa lo que intente, parece poner el texto arriba o debajo.
<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> 
·
Juan Pablo Isaza
2 answers
Answer question0
No estoy seguro de cuánto contenido le gustaría agregar a la izquierda/derecha del elemento del canvas , pero sugeriría algo como:
<div class="container"> <div>Left text....</div> <canvas id="canvas" width="700" height="700"></canvas> <div>Right text....</div> </div>Con el siguiente CSS:
.container {display: flex; flex-direction: "row"; }
·
Juan Pablo Isaza
Report
0
Solo necesitaba agregar un poco más de css para hacerlo dentro de una línea.
EDITAR:
El fragmento revisado ahora se puede ejecutar, con la nueva clase inline-block-centered aplicada al lienzo y al texto circundante.
(El borde del lienzo es solo para que el lienzo sea visible en el fragmento).
/* 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>
·
Juan Pablo Isaza
Report
Answer question