CODEWITHSUNDEEP
htmlcsscanvashtml5-canvas
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

HTML5 Canvas showing issue When it is in a div container

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

Upvotes: 0

Views: 732

Answers (3)

Kisspa
Kisspa

Reputation: 584

Update below css attribute in your code :

     div{margin:0 auto;}

Upvotes: 0

Vel
Vel

Reputation: 731

add 

canvas{vertical-align: middle;}

Upvotes: 2

James King
James King

Reputation: 1917

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

Upvotes: -1

Related Questions