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

【问题标题】：How to center align img wrapped in SPAN tag?如何居中对齐包裹在 SPAN 标签中的 img？
【发布时间】：2019-08-20 19:25:55
【问题描述】：

我正在尝试将包含在 <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>

【问题讨论】：

那么为什么不在.imgframe 元素上使用display: block 呢？或者，更好的是，使用div?

标签： html css

【解决方案1】：

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

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

Demo

【讨论】：

【解决方案2】：

只需制作图像包装块级元素并 text-align:center; 即可。

FIDDLE

如果需要，也可以将其包裹在另一个元素中；

FIDDLE

【讨论】：

【解决方案3】：

在.imgframe中，添加宽度：100%；

【讨论】：

...但我不希望框架占据页面的整个宽度，仅在图像边缘之外 8px。
然后用div包围它，让div上的宽度为100%。容器必须知道页面的宽度才能使其居中。

【解决方案4】：

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

body {
    text-align: center;
}

body p {
    text-align: left;
}

JS Fiddle demo.

如果您将 Fiddle 中的元素包裹在一个特定的、可定位的元素中，这可能会减少干扰；而不是body，因为上面的方法要求您为body 中包含的所有元素重置text-align。所以，就个人而言，我会使用：

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

还有：

#contentWrapper {
    text-align: center;
}

#contentWrapper p {
    text-align: left;
}

只是为了尽量减少事后整理所需的工作量。

【讨论】：

【解决方案5】：

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

【讨论】：