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标签替换为：

Renderers/Camera

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用css水平对齐文本和框

2 个答案: