在HTML 5画布的每一边对齐文本

Align text on each side of HTML 5 canvas

本文关键字：对齐 文本 HTML 5画      更新时间：2023-09-26

我试图在画布元素的每一边对齐文本。这似乎很难通过CSS实现。

https://github.com/nnnick/Chart.js/issues/114 issuecomment - 18564527

我错过了什么明显的吗?我认为它可能更容易定位文本作为绘图逻辑的一部分，而不是处理CSS。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">top text</div>
        <div class="col-xs-4"></div>
    </div>
    <div class="row">
        <div class="col-xs-4">left text</div>
        <div class="col-xs-4"><canvas id="canvas" width="250" height="250"></canvas></div>
        <div class="col-xs-4">right text</div>
    </div>
    <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">bottom text</div>
        <div class="col-xs-4"></div>
    </div>
</div>


小提琴

只需将每个div变成行内块。

.row:nth-child(2) div {display:inline-block; line-height:250px;
   vertical-align:middle; margin:.25em; padding:0; height:auto; width:auto}
#canvas {display:inline-block; vertical-align:middle; margin:0; border:0;
   padding:0;}

注意:以上是你的问题的答案，但为了使结果看起来更像参考图像，我不得不添加一些装饰性的CSS…

.container-fluid {float:left}
.row {text-align:center; width:auto; height:auto}
hr {clear:both}

参见更新后的fiddle。

另一个注意事项:宽度:auto和高度:auto等似乎是必要的抵消的东西在bootstrap样式表
相关文章：