I'm trying to align an image at the bottom of a div while also centering it using the following CSS:
HTML:
<div class="myDiv">
<img src="http://bit.ly/1gHcL8T" class="imageCenter" />
</div>
CSS:
.myDiv {
width: 80%;
height: 200px;
position: relative;
}
.imageCenter {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
bottom: 0;
}
Now, I would like to make this image responsive by setting its width as a percentage. Is there a way to achieve this?
See JSFiddle here: http://jsfiddle.net/8e7UM/1/