摘自:张鑫旭-鑫空间-鑫生活[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. CSS--滚动条设置;

    CSS滚动条实现步骤及美化小技巧 1.overflow-y : 设置当对象的内容超过其指定高度时如何管理内容:overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容. 参数:visib ...

  2. Codeforces Round #114 (Div. 2)

    Codeforces Round #114 (Div. 2) 代码 Codeforces Round #114 (Div. 2) C. Wizards and Trolleybuses 思路 每条车的 ...

  3. CentOS 中PHP开启 GD功能

    yum install php-gd 然后重启服务器: service httpd restart

  4. appium简明教程(6)——启动appium及android模拟器

    一般情况下,我们都从命令行启动appium. windows下,dos命令窗口输入 appium 如果该命令报错,那么请重装appium npm install -g appium 如果安装出错,请自 ...

  5. Httptunnel教程

    hts --forward-port localhost:22 80 htc -F 6789 192.168.10.1:80

  6. OSGi 的核心配置、动态化及问题

    一.OSGi的核心组件Bundle,与java中jar包的差别就是元数据配置:      常用的Bundle元数据定义:     a) Bundle-Activator:定义Activator的实现全 ...

  7. Visual Studio 调试技巧

    .net程序开发工具我都用vs(visual studio),开发过程中的跟踪调试最常用的就是断点跟踪调试了,但是现在才发现,用了这么多年vs断点跟踪调试是白用了啊.它居然还可以有这么多用法. 设置断 ...

  8. browser-ua

    故事还得从头说起,最初的主角叫NCSA Mosaic,简称Mosaic(马赛克),是1992年末位于伊利诺伊大学厄巴纳-香槟分校的国家超级计算机应用中心(National Center for Sup ...

  9. 第一篇帖子,就弄个JS动态公告浏览吧,直接上代码

    .scroll{    margin-left:45px;    margin-top:-150px;    height:100px;    width:300px;} <script lan ...

  10. 使自定义事件支持多绑定 js

    <script language="JavaScript" type="text/javascript"> <!-- //定义类class1 ...