javascript - 使用 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;">