Image inside Div

[Jordonias]

Ok, I have an image inside a div. The div is 804px by 100px. The image is 500px by 70px. I am trying to get it so that the image is aligned in the center of the div and on the complete bottom of it. Can anybody help me with this? How would I go about doing this?

[gaz545]

img {
left: 50%;
top: 50%;
}

Note that it will apple to every image.

[aaron lozier]

Here is how I would do it.

Suppose your HTML looked like this:

<div id="myDiv">
<img src="myImg.jpg />
</div>

Your CSS should look like this: (remove style tags if using stylesheet)

<style>
#myDiv
{
width: 804px;
height: 100px;
position: relative;
}

#myDiv img {
width: 500px;
height: 70px;
position: absolute;
bottom: 0px;
left: 152px;
}
</style>

By placing the "position: relative" definition in your div, the div becomes the reference point for child elements, such as your image. You may then "absolutely position" the image, 0 pixels from the bottom, and 152 pixels from the left.

Let me know if this helps.

[chicgeek]

change that to

bottom: 0%

[gaz545]

oh my bad, didn't read it correctly.

[JuggoPop]

that's what i was thinking... good job there.