摘自：张鑫旭-鑫空间-鑫生活[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. leetcode 122. Best Time to Buy and Sell Stock II ----- java

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  2. PHP设置图片文件上传大小的具体实现方法

    PHP默认的上传限定是最大2M,想上传超过此设定的文件,需要调整PHP.apache等的一些参数 我们简要介绍一下PHP文件上传涉及到的一些参数: •file_uploads :是否允许通过HTTP上 ...

  3. spark新能优化之数据本地化

    数据本地化的背景: 数据本地化对于Spark Job性能有着巨大的影响.如果数据以及要计算它的代码是在一起的,那么性能当然会非常高.但是,如果数据和计算它的代码是分开的,那么其中之一必须到另外一方的机 ...

  4. c++ 读写注册表

    void RegUpdate(HKEY hRootKey,LPCSTR szSubKey,LPCSTR szValueName,LPCSTR szValue) { HKEY hKey; LONG rc ...

  5. PHP快速排序及其时间复杂度

    <?php function quickSort(&$arr, $l, $r) { if (count($arr)<2 || $l>$r) return; $tmp_l = ...

  6. EDIUS删除创建的工程预设的教程

    自从第一次启动EDIUS 8,创建了一个工程预设,之后每次启动软件都会出现,但创建的预设又用不着了,如何删除呢?下面,小编就 给大家演示如何正确删除EDIUS 8工程预设. 1.启动软件,点击设置菜单 ...

  7. 【转】asp.net中的cookie使用介绍

    来源:http://www.jb51.net/article/30398.htm 一.cookie导读,理解什么是cookie 1.什么是cookie:cookie是一种能够让网站服务器把少量数据(4 ...

  8. Jmeter使用

    好久没有试过Jmeter了,下载个新版本试试,顺便温习一下. 1. 如何修改JMeter语言环境 在菜单栏中通过“选项”–“选择语言”选了英文后,下次登录JMeter,还是显示的中文,修改语言无效.关 ...

  9. css_样式样式器的分类

    详情:http://www.w3school.com.cn/h.asp 1.标签样式器:此样式器仅对html页面中div标签有效果 div{ background-color: rosybrown; ...

  10. python　字典访问的三种方法

    定义字典 dic = {'a':"hello",'b':"how",'c':"you"} 方法一: for key in dic: prin ...