How to center align img wrapped in SPAN tag?

Question

I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/

I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)

Any help would be greatly appreciated.

.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}

<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>​

Answer 1

I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding-top: 10px; //margin-top doesn't work
} 

Demo