摘自：张鑫旭-鑫空间-鑫生活[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. HDU-5783 Divide the Sequence（贪心）

    题目大意:给一个整数序列,将其划分成若干个子连续序列,使其每个子序列的前缀和不为负.求最大的划分个数. 题目分析:从后往做累加计算,如果不为负,则计数加一,累加和清0.否则,一直往前扫描.如果最终的和 ...

  2. JQ插件jquery.fn.extend与jquery.extend

    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend( ...

  3. springMvc源码学习之：spirngMvc的拦截器使用

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  4. Lua快速入门

    -- 两个横线开始单行的注释 --[[ 加上两个[和]表示 多行的注释. --]] ---------------------------------------------------- -- 1. ...

  5. MUA

    a big deal analysis analytics cooperate 合作 efficient explicitly fine grained Granularity graph geogr ...

  6. MySQL-使用tcpdump排查MySQLl数据库tps飙升的问题

    可以直接输出 tcpdump -i eth1 -s -l - | strings | perl -e ' while(<>) { chomp; next if /^[^ ]+[ ]*$/; ...

  7. Swift使用Alamofire实现网络请求

    Alamofire是一个用Swift编写的HTTP网络库,由此前热门开源项目AFNetworking的的作者mattt开发,可非常简单地用于异步网络通信. 要获取最新版本的 Alamofire,前往h ...

  8. Nginx 性能优化

    1.安全优化:隐藏Nginx版本号,server_tokens off; 2.安全优化:更改掉默认的用户  user nginx; 3.性能优化:  根据硬件配置,调整nginx worker 进程数 ...

  9. JAVA包命名规范

    学习Java的童鞋们都知道,Java的包.类.接口.方法.变量.常量:JavaEE的三层模型等都有一套约定俗成的命名规则. 我学习每种语言都会关注相应的命名规则,一则体现自己比较专业:二来方便后检查, ...

  10. 【linux】 linux 查看系统信息

    1.输入"uname -a ",可显示电脑以及操作系统的相关信息. 2.输入"cat /proc/version",说明正在运行的内核版本. 3.输入" ...