使用css水平对齐文本和框

aligning text and box horizontally using css

本文关键字：文本 对齐 css 水平 使用      更新时间：2023-09-26

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

伙计们，我想要的是将方框和文本水平对齐。。。顺便说一句，我完全是个新手。。所以请帮帮我：(

非常感谢

将画布标记替换为：

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

您可以使用flex box概念轻松实现这一点。请参阅此备忘单进行定制。

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

相关文章：