0

Here is My Demo http://jsfiddle.net/9D4L4/2/

I am using canvas element for the Image.

The DIV which contain canvas Element not taking the Line-height. I want to make the canvas element verticaly center to the div. Please Help me

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

I want the Whole Canvas(in red color) to be the vertically center of that DIV

1
  • @Mr. Alien......U der??? Jun 13, 2014 at 10:17

3 Answers 3

2

add

canvas{vertical-align: middle;} 
0
0

Update below css attribute in your code :

     div{margin:0 auto;}
-1

Giving the canvas a height of 100px will do it, so the canvas will fill the height of the parent DIV

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.