HTML5 Canvas 在 div 容器中时显示问题

Question

这是我的演示 http://jsfiddle.net/9D4L4/2/

我正在为图像使用 canvas 元素。

包含 canvas 元素的 DIV 不采用 Line-height.我想让 Canvas 元素垂直居中到 div。请帮助我

HTML

<h1>Normal Image </h1>
<div>
    <img src="http://jeevanmukti.info/images/key.gif" />

</div>
<br><br><br>

    <h1>When i use canvas </h1>

<div>
    <canvas >1111</canvas> 

</div>

CSS

div{background:grey; width:100px; height:100px; text-align:center; line-height:100px; }
img{max-width:100%; max-height:100%}
canvas{background:url('http://jeevanmukti.info/images/key.gif') no-repeat center center; padding:0; margin:0; max-width:100%; max-height:100%}

我希望整个 Canvas (红色)成为该 DIV 的垂直中心

Answer 1

添加

canvas{vertical-align: middle;}