Html 如何将包裹在跨度标签中的img居中对齐？

我正在尝试将包裹在

中的图像居中对齐，但执行此操作时遇到问题。我已将CSS和HTML上载到JSFIDLE：

我正试图使图像以“块”样式将其自身与内容居中对齐（即，图像上方和下方的所有文本，而不是向左或向右包装）

任何帮助都将不胜感激

.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>​

.imgframe{
边框：1px实心#EAEAEA；
显示：内联块；
利润率：8px；
}
.img帧img{
边框：1px实心#FFFFFF；
保证金：0；
背景：#F6F6F6；
填充：8px；
-moz盒阴影：2px2p5px#CCCC；
-webkit盒阴影：2px 2px 5px#CCCC；
}
​

在imgframe中，添加宽度：100%

只需将图像包装块级别的元素与

文本对齐：居中它


或者，如果需要，用另一种元素将其包裹起来

根据您的要求，为了使
.imgframe
元素保持对齐，避免它占用封闭元素的整个宽度，并且在不向标记中添加包装元素的情况下工作，以下工作：

body {
    text-align: center;
}

body p {
    text-align: left;
}


如果您将小提琴中的元素包装在一个特定的、有针对性的元素中，那么这可能就不会那么麻烦了；而不是
正文
，因为上述方法要求您为
正文
中包含的所有元素重置
文本对齐
。因此，就我个人而言，我会使用：

<div id="contentWrapper">
    <p>...</p>
    <span class="imgframe">
        <img src="..." />
    </span>
    <p>...</p>
</div>

只是为了尽量减少事后整理所需的工作量。
我认为使用文本对齐来居中文本比使用图像更合适。您可以通过设置“左边距自动”和“右边距自动”使图像居中

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

那么为什么不在
.imgframe
元素上使用
显示：block
？或者，更好的方法是使用
div
？…但我不希望框架占据页面的整个宽度，仅在图像边缘外8px。然后用div将其包围，并使宽度100%位于div上。容器必须知道页面的宽度，以便将其居中。
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding-top: 10px; //margin-top doesn't work
} 

span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}