如何居中对齐包裹在SPAN标签中的img？

Question

我试图将一个包裹在一个图像中心对齐<span>,但我很难这样做.我已将CSS和HTML上传到jsfiddle:http://jsfiddle.net/7nHhu/1/

我试图让图像居中与"块"样式的内容对齐(即,所有文本在其上方和下方,不包裹在左侧或右侧)

任何帮助将不胜感激.

.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

我认为使用text-align来使文本居中而不是图像更合适.您可以通过设置左右边距自动来居中图像.

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

演示