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

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

而对于 DIV 的居中,使用下面的这种办法来让 DIV 居中是常用手段,然而这种办法默认状态下并不适用于 IMG 居中。

div{margin:0 auto}

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

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

效果测试代码

<div>图文混排
<br><img src="http://www.baidu.com/img/baidu_jgylogo3.gif">
<br>这是百度的LOGO
</div>
<style>
IMG {display:block;margin:0 auto;}
</style> 

DIV+CSS 图文混排的图片居中办法的更多相关文章

  1. javaWeb css图文混排

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. TextView + Spanned实现图文混排以及图片点击交互

    最近要实现图文混排的需求,webview过大,所以想到了用SpannableStringBuilder来实现. 不过参考了大量国内文章,大多数是教你如何实现图文混排,并没有提及图片点击交互的.有翻阅了 ...

  3. HTML5[8]: 图文混排,图片与文字居中对齐

    <img src="image.png"><span>999</span> img { /* ...  */ vertical-align: t ...

  4. UILabel图文混排显示图片和文字

    //传入文字 自动图片放在左边文字紧接着后排排布 -(void)setAttrDetailLabelWithTitle:(NSString *)title { NSMutableAttributedS ...

  5. 前端知识复习:Html DIV 图文混排(文字放在图片下边)

    Html知识复习之图文混排 练习练习基础 先上效果图: 废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.or ...

  6. Android 图文混排 通过webview实现并实现点击图片

    在一个开源项目看到是用的webview 实现的 1. 这是在asset中的一个模板html <html> <head> <title>News Detail< ...

  7. css实现图文混排

    css实现图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. Coretext实现图文混排及Gif图片播放

    CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念:  CTFont CTFontCollection CTFontD ...

  9. ListView异步加载图片,完美实现图文混排

    昨天参加一个面试,面试官让当场写一个类似于新闻列表的页面,文本数据和图片都从网络上获取,想起我还没写过ListView异步加载图片并实现图文混排效果的文章,so,今天就来写一下,介绍一下经验. Lis ...

随机推荐

  1. 放养的小爬虫--豆瓣电影入门级爬虫(mongodb使用教程~)

    放养的小爬虫--豆瓣电影入门级爬虫(mongodb使用教程~) 笔者声明:只用于学习交流,不用于其他途径.源代码已上传github.githu地址:https://github.com/Erma-Wa ...

  2. PR&AE插件开发遇到的一个坑

    经过一段时间的摸索,对Adobe Premiere Pro和After Effects系列插件的开发工作有了一定的掌握.如今公司需要针对Premiere Pro和After Effects开发另外一款 ...

  3. [WCF编程]7.实例上下文模式

    一.实例上下文模式概述 实例上下文(IntanceContext Mode)表示服务端的服务实例与客户端的服务代理的绑定方式. 在实例化服务器对象时,WCF采用了3种不同的模式:单调(Per-Call ...

  4. SQL SERVER 的模糊查询 LIKE

    今天写个动态脚本,需要把数据库里面包含“USER_"的表删除掉,突然想不起来如何搜索通配字符了,赶紧查查MSDN,整理了下模糊查询的知识点,留着以后查阅用. LIKE模糊查询的通配符 通配符 ...

  5. 【C#进阶系列】30 学习总结

    前面学起来还是很顺的,毕竟很多都接触过. 后面学起来只能用“磨”来形容,以至于八章用了2个月.(当然也有相当一些原因是这两个月中发生了一些个人生活上的问题) 总的来说收获超大,这种感觉就像大一的时候学 ...

  6. php中导入导出excel的原理

    在php中我们要经常导入导出excel文件,方便后台管理.那么php导入和导出excel的原理到底是什么呢?excel分为两大版本excel2007(后缀.xlsx).excel2003(后缀.xls ...

  7. 谁在关心toString的性能?

    谁在关心toString的性能?没有人!除非当你有大量的数据在批量处理,使用toString产生了许多日志.然后,你去调查为何如此之慢,才意识到大部分的toString方法使用的是introspect ...

  8. FFMpeg video duration

    1. 代码 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import ...

  9. 国内IT软件开发人员现状

             首先在这里讨论的是国内的大陆地区.在今天这个中国IT环境下,开发人员出路何在?一个优秀开发人,应该有致力于编写优雅代码,让别人读得懂,具有可读性,可测试性的代码,不仅仅是可以运行的代 ...

  10. 使用git error: RPC failed; result=22, HTTP code = 411

    使用git提交比较大的文件的时候可能会出现这个错误 error: RPC failed; result=22, HTTP code = 411 fatal: The remote end hung u ...