摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

图片与文字默认是居底对齐了。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了,我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错,但是IE下,虽然是效果好了些,但还是不够。
如果,图片是个20像素*20像素左右的小图片,文字也差不多12px大,则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽,兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签,支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话,img{margin:0 3px -3px 0;}可以说是公式版的东西,能实现效果和兼容性俱佳的对齐效果。

[CSS]图片与文字对齐问题的更多相关文章

  1. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  2. css控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...

  3. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  4. DIV+CSS 让同一行的图片和文字对齐

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  5. div css 图片和文字上下居中对齐

    想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...

  6. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  7. html&css中的文字对齐问题

    html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示.   两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...

  8. css图标与文字对齐实现方法

    1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采 ...

  9. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

随机推荐

  1. c#部分---结构体再利用;

    //定义一个结构体,存放关于车辆的几个信息 //将所有车的信息都放入集合中 //车型号 价格(W) 轴距 (mm) 油耗(L/100km) //宝马320Li 38 2920 6.9 //宝马520L ...

  2. ubuntu14.04 ibus pinyin wrong (ibus拼音乱拼问题)

    在ubuntu14.04版的中文输入法ibus中,有时会出现拼音乱拼的问题.不过已经有了成熟的解决方案. 具体方法如下: apt-get remove ibus-pinyin apt-get inst ...

  3. JavaWeb学习记录(三)——网页中文编码问题

    方法一: public void doGet(HttpServletRequest request, HttpServletResponse response)            throws S ...

  4. MySQL 用户与授权管理详解

    大纲 一.前言 二.创建用户并授权 三.GRANT语句的种类 四.撤权并删除用户 一.前言 做为Mysql数据库管理员管理用户账户,是一件很重要的事,指出哪个用户可以连接服务器,从哪里连接,连接后能做 ...

  5. iproute-2.6.32

    iproute之tc命令翻译地址,man tc的翻译 http://blog.csdn.net/ysdaniel/article/details/7905879

  6. 【转】 CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  7. Oracle translate 函数的用法, 以及和replace的区别

     translate 是用来替换字符的函数 语法:  translate(char, from_str,to_str)   其中,char是待处理的字符串. from_str是按顺序排列若干个要被替换 ...

  8. EDM营销算法:python自动批量发邮件

    EDM营销:全称Email Direct Marketing,即电子邮件营销.企业可以通过使用EDM软件向目标客户发送EDM邮件,建立同目标顾客的沟通渠道,向其直接传达相关信息,用来促进销售.EDM软 ...

  9. Android记录11-控制ExpandableListView展开和关闭

    Android记录11-控制ExpandableListView展开和关闭 2013年12月5日 工作记录 我们在使用ExpandableListView可能会遇到各种问题,比如说只展开一个组,关闭其 ...

  10. kindle相关工具

    里是与 Kindle 电子书相关的工具软件.它们可以帮助我们解决在日常使用电子书时所可能遇到的问题,比如 kindle 管理工具.kindle 转换工具.kindle电子书制作工具.kindle 推送 ...