javascript - 在 HTML 5 Canvas 的每一侧对齐文本

Question

我正在尝试对齐 Canvas 元素每一侧的文本。这似乎很难通过 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>

Fiddle

Answer 1

只需将每个 div 变成内联 block 。

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

参见 updated fiddle .

另一个注意事项:width:auto 和 height:auto 等似乎是抵消 Bootstrap 样式表中的东西所必需的。