使用css水平对齐文本和框

Question

 .floating-box{ display:inline-block; height:10px; margin:20px; } h2 { text-align: center; } 

 <div class=floating-box style="display:inline-block;"> <canvas id="myCanvas2" width="100" height="103" style="border:1px solid black;margin-right:170px"> <script> var c = document.getElementById("myCanvas2"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100,103); ctx.stroke(); ctx.moveTo(100, 0); ctx.lineTo(0, 103); ctx.stroke(); </script> </canvas> <div class="floating-box"><h2>Product Name </h2></div> </div> 

伙计们我想要的是水平对齐盒子和文本...顺便说一句我完全是新手..所以请帮助我:)

非常感谢

Answer 1

用这个替换canvas标签：

<canvas id="myCanvas2" width="100" height="103" style="border:1px solid black;display: -webkit-inline-box;border: 1px solid black;margin-right: 0px;">

Answer 2

您可以使用弹性盒概念轻松实现此目的。 请参阅此备忘单进行自定义。

 .floating-box{ display: flex; flex-direction: row; align-items: flex-start; align-content: flex-start; justify-content: center; } h2 { margin: 0; } 

 <div class=floating-box style=""> <canvas id="myCanvas2" width="100" height="103" style="border:1px solid black;"></canvas> <div class="name"><h2>Product Name </h2></div> </div> <script> var c = document.getElementById("myCanvas2"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100,103); ctx.stroke(); ctx.moveTo(100, 0); ctx.lineTo(0, 103); ctx.stroke(); </script>