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
add
canvas{vertical-align: middle;}
Update below css attribute in your code :
div{margin:0 auto;}
Giving the canvas a height of 100px will do it, so the canvas will fill the height of the parent DIV
Related
Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.
http://jsfiddle.net/6x8Dm/
HTML
<div class="wrapper">
<div class="column">
<img src="http://www.lorempixel.com/200/200/" />
</div>
</div>
CSS
.wrapper {
width:200px;
margin:0 auto;
}
.column {
width:100%;
background:#cc0000;
}
img {
width:100%;
}
That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:
add a vertical-align:top rule to the image jsFiddle example
add font-size:0; to the containing div jsFiddle example
add display:block; to the image jsFiddle example
One way is by setting display:block on the img, causing it to fill the parent.
jsFiddle here - it works.
img {
width:100%;
display:block;
}
Alternatively, if you don't like that approach, you can also change the vertical alignment, as the default is baseline.
Okay I have tried to center this responsive image using the vertical-align and text-align property with no luck. Can someone tell me what I'm doing wrong. I want the image to be vertically and horizontally in the middle of the page.
<div class="circle">
<div class="bl-circle" style="z-index:9999;">
<a href="http://www.leedsrush.com"><img src="images/Circular.png" onmouseover="this.src='images/leeds.png'" onmouseout="this.src='images/Circular.png'" style="width:100%; height:100%;"/>
</a>
</div>
</div>
.bl-circle{
position: absolute;
max-width:250px;
max-height:250px;
height:100%;
width:100%;
margin-left:auto;
margin-right:auto;
}
.circle{
}
I would check out this tutorial:
http://pmob.co.uk/pob/hoz-vert-center.htm
This is what I use when I am trying to center an element in my page. Works like a charm every time, especially the example at the bottom when're you don't know the width and height of the element.
I know I'm missing something obvious here... the DIV has a fixed width, the image has a fixed width, this should be a snap...
<style>
.featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
class='featured' style='width:186px;height:215px;'>
</div>
You can play with it here: http://jsfiddle.net/AHjAk/
You'll also need to add display: block; to the image if you plan on centering it using auto for its left/right margins
http://jsfiddle.net/AHjAk/1/
or try this simple text-align:center; the container
http://jsfiddle.net/AHjAk/2/
<div style='width:300px;border:solid 1px red;text-align:center'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg' class='featured'>
</div>
Try adding text-align:center to the parent gif that should center the image.
<style>
.featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;text-align:center'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
class='featured' style='width:186px;height:215px;'>
</div>
And if you want to center that parent div itself, your body needs a text-align:center.
Images will not center with vertical align for me, as it seems they should. I am coding for IE7 in quirks mode only (unfortunately). My code is below. Anyone know why this wouldn't vertically align
<html>
<head>
</head>
<body>
<div style="height:500px; width 500px; line-height:500px; background-color:Green; vertical-align:middle;">
<img src="./images/load.gif" style="vertical-align:middle;"/>
</div>
</body>
</html>
If you want to vertically align your image within the div you should do the following:
div {
position:relative;
height:500px;
width:500px;
}
div img {
position:absolute;
top:50%;
margin-top:-XXXpx; /* where XXX is half the height of the image */
}
You can make the image a background image instead and then center the background with something like the following:
<div style="height:500px; width 500px; line-height:500px; background: green url('/images/load.gif') left center no-repeat ; "></div>
I have to put a background image in a div, if i put only image, it will not show. if i put only height it will be shown.
so in this way it will be shown:
<div id="big" style="background-image:url('base1.png');height:200px;"></div>
if i want to position div and resize image in this way
<div id="big" style="background-image:url('base1.png'); left:519px; top:423px; width:474px; height:205px; z-index:4"></div>
it will be not shown. what can i do? can you help me?
use css
<div id="big"></div>
#big {
display:block;
width:300px;
min-height:300px;
background : url('img/image.jpg') no-repeat 50px 50px;
}