摘自:张鑫旭-鑫空间-鑫生活[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. js部分---运算符,if分支语句,for循环;switch case 的用法;

    ------------------------------------------运算符---------------------------------------------------- *数 ...

  2. Redis常用操作

    一.string类型的常用命令 set key1 com #一个key对应一个value,多次复制,会覆盖前面的value setnx key1 zhangsan #如果key1不存在则创建key1, ...

  3. hihoCoder #1301 : 筑地市场 (打表+构造)

    题目大意:问含有4或者7的第k大的正数是多少. 题目分析:1~10.1~100.1~1000...之间的含有4或者7的个数可以求出,这样就可以从高位到地位依次确定这个数的每一位上的值. 代码如下: # ...

  4. kuangbin_ShortPath A (POJ 2387)

    最短路模板题 但是其实很费时间 因为要看明白dij floyd 以及 dij优化 spfa优化 交了三次 大概是理解了 不过涉及到priority_queue的重载运算符问题 以后要在C++里面好好看 ...

  5. ARM1138@库函数速查

    1. GPIO库函数 可实现的功能: 获得/设置指定管脚的方向(输入.输出)和模式(硬件控制) 获取/设置指定管脚的配置(驱动强度2/4/8/8_SCmA.管脚模式:推挽(弱上拉/弱下拉)/开漏(弱上 ...

  6. 由<a>标签的onclick影出来的问题

    今天做了一个 通过 document.getElementByName()的方法获得一个标签a的集合.tag_a=window.docu..... 接着需要给每个标签都加一个onclick事件. fo ...

  7. Scrum 项目3.0

    Scrum 项目3.0 3.0----------------------------------------------------- SCRUM 流程的步骤2: Spring 计划 1. 确保pr ...

  8. windows下多个python版本共存

    方法/步骤   首先当然是安装你需要的两个不同版本的python,这里我安装的是2.7和3.3的,两个版本安装顺序无所谓.   接下来就是检查环境变量,缺少的我们需要添加.先找到环境变量的位置.   ...

  9. 代码备份:处理 SUN397 的代码,将其分为 80% 训练数据 以及 20% 的测试数据

    处理SUN397 的代码,将其分为80% 训练数据以及20% 的测试数据 2016-07-27 1 %% Code for Process SUN397 Scene Classification 2 ...

  10. JDBC getMetaData将结果集组装到List

    transient List query(Config config, Connection conn, String sql, Object paras[]) throws SQLException ...