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
}

Demo

Answer 2

只需制作图像包装块级别元素和text-align:center;它。

FIDDLE

或在需要时将其包装在另一个元素中;

FIDDLE

Answer 3

在.imgframe中，添加宽度：100％;

Answer 4

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

body {
    text-align: center;
}

body p {
    text-align: left;
}

JS Fiddle demo

如果您将小提琴中的元素包含在特定的，可定位的元素中，那么这可能会减少干扰;而不是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;
}

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

Answer 5

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

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

5 个答案: