码迷,mamicode.com
首页 > Web开发 > 详细

DIV+CSS 图文混排的图片居中办法

时间:2015-05-20 00:08:57      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN、DIV、LI 等等,以便于使用 text-align来进行居中。

1 <div>图文混排
2 <br>
3 <span style="text-align:center"><img src="http://www.baidu.com/img/baidu_jgylogo3.gif"></span>
4 </div>

而对于 DIV 的居中,使用下面的这种办法的非常多,然而这种办法默认状态下并不适用于 IMG 居中。

1 div{margin:0 auto}

这是因为 IMG 标签是属于内联元素(行内元素),内联元素是不支持 Margin 属性,通过 Display 属性将 IMG 强制为块元素的方式显示,便可在图文混排中使得图片可以居中。

1 IMG {display:block;margin:0 auto;}

 



DIV+CSS 图文混排的图片居中办法

标签:

原文地址:http://www.cnblogs.com/hkmhd/p/IMG_Center.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!