Centering Large Image within a Child Div

[jd65]

Hello,

I'm having a vexing problem that's driving me nuts.

Simply, I have a parent div and a single child div within it. In the child div, I would like to insert a single image, however, the image may be larger than the dimensions of the child div. I would like the image to be centred horizontally and vertically. Any help with my code below would be greatly appreciated.

Here's what I have:

HTML:

<div id="parent"><div id="child"><img src="image1.jpg" /></div></div>

CSS:

#parent { /* The parent spans the width of the browser */
	width: 100%; height: 305px; background-color: white; display: block;
}

#child { /* The child should fit within the parent and is centred */
	width: 960px; background-color: #CCC; border: 1px solid #999; height: 305px; margin: 0 auto;
}

#child img { /* How do I center my image within the child div? My code here doesn't work :(  */
 display: inline-block; margin: 0 auto; overflow: hidden;
}

Thanks,
ds.

 

[vacunita]

The easy way? Remove the display:inline-block from the image, and add a text-align:center to your child div.

[COLOR=#993399]#child[/color] [COLOR=#FF0000]{[/color] [i][COLOR=#9A1900]/* The child should fit within the parent and is centred */[/color][/i]
[COLOR=#0000FF]width:[/color] [i][COLOR=#009900]960px[/color][/i]; [COLOR=#0000FF]background-color:[/color] [COLOR=#FF0000]#CCC[/color]; [COLOR=#0000FF]border:[/color] [i][COLOR=#009900]1px[/color][/i] [i][COLOR=#009900]solid[/color][/i] [COLOR=#FF0000]#999[/color]; [COLOR=#0000FF]height:[/color] [i][COLOR=#009900]305px[/color][/i]; [COLOR=#0000FF]margin:[/color] [i][COLOR=#009900]0[/color][/i] [i][COLOR=#009900]auto[/color][/i]; 
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#child[/color] img [COLOR=#FF0000]{[/color] [i][COLOR=#9A1900]/* How do I center my image within the child div? My code here doesn't work :(  */[/color][/i]
 [COLOR=#0000FF]margin:[/color] [i][COLOR=#009900]0[/color][/i] [i][COLOR=#009900]auto[/color][/i]; [COLOR=#0000FF]overflow:[/color] [i][COLOR=#009900]hidden[/color][/i]; [b][COLOR=#0000FF]text-align:[/color][i][COLOR=#009900]center[/color][/i];[/b]
[COLOR=#FF0000]}[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech