如何居中对齐SPAN标签中包装的img？ [英] How to center align img wrapped in SPAN tag?

问题描述

我正在尝试居中对齐包裹在< span> 中的图像，但是这样做很麻烦。我已将CSS和HTML上传到jsfiddle： http://jsfiddle.net/7nHhu/1/

I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/

我正在尝试使图像以块样式（例如，其上方和下方的所有文本，而不是包裹在左侧）的内容与居中对齐或对）

I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)

任何帮助将不胜感激。

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

推荐答案

只需使图像包装程序块级别元素和 text-align：center; 它。

Just make image wrapper block level element and text-align:center; it.

字段

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

or wrap it in another element if needed;

FIDDLE

这篇关于如何居中对齐SPAN标签中包装的img？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！