4

我正在尝试将包裹在 中的图像居中对齐<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>​
4

5 回答 5

7

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

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

演示

于 2014-05-19T11:48:07.173 回答
3

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

小提琴

或根据需要将其包装在另一个元素中；

小提琴

于 2012-07-06T22:54:43.493 回答
0

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

于 2012-07-06T22:52:23.223 回答
0

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

body {
    text-align: center;
}

body p {
    text-align: left;
}

JS 小提琴演示。

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

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

和：

#contentWrapper {
    text-align: center;
}

#contentWrapper p {
    text-align: left;
}

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

于 2012-07-06T22:59:50.433 回答
-1 
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}
于 2019-08-20T09:43:34.967 回答