aligning text and box horizontally using 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> 

guys what i want is to align the box and the text horizontally ... by the way i am totally newbie .. so please help me :)

thanks a lot

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

You can use flex box concept to achieve this easily. Refer to this Cheat Sheet for customisation.

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