Centering Image Horizontally within Div Layer

Question

I've placed an image inside a div layer. The div layer is 200 pixels wide by 200 pixels high. My image is 480 pixels x 720 pixels. So the layer is smaller than the image. How do I center the image horizontally within my div layer? I've applied a css rule on the layer as followed:
#pictureframe {
position:absolute;
width:200px;
height:200px;
overflow: hidden;
text-align: center;
vertical-align: middle;
display: inline-block;
Because the image is larger than the div layer the image doesn't want to center horizontally. It seem to justify itself on the left side of the div layer even though I've applied a text-align: center on it. Any suggestions.

Answer 1

Make your division at least as wide as your image.  Height of divisions should always be determined by content inside it.  If you impose a height limit on your division, increased content or text size will fail, causing content to be hidden.  If required to display a background-image, use the min-height property.
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Also, APDivs cannot be centered as they are removed from the normal page flow. You might try wrapping an APDiv inside a relatively positioned parent container, but without seeing your page (entire code), it's impossible to say for sure if this will work for you.
See Centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb