图片样式为

以下为引用的内容:
.style img{vertical-align:middle;.....}

如果STYLE中有其它如INPUT或其它内联元素可写成

以下为引用的内容:
.style img,.style.input{vertical-align:middle;.....}

.style *{vertical-align:middle;.....}
/*在不影响其它元素的情况下使用这个通配符*/

以上是在没有设置高度/行高的事情下,如果加入了高度和行高的事情下FF可以支持,IE6以下则不完全支持,看以下测试结果。(为了增加明显的效果对图片适当增加了高度)

总结:对于单行图片文字垂直居中(有图片的情况下)

1.当没有高度行高时,我们只要简单的对内联元素应用vertical-align:middle;就可以了。此外对于一个图片和文字的高度相差无几的,不用这个样式也是可以的。

2.对于有行高或有行高+高度的,FF可以正确显示,ie6失效。所以也只能对IE6以下版本使用KACK了!现在IE7已经改正了这个错误。

3.对2补充一下,可以用不定高度,用上下补白的方法,这样就可以兼容IE6了。

用CSS如何实现单行图片与文字垂直居中的更多相关文章

  1. css 单行/多行文字垂直居中问题

    例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...

  2. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  3. css横线中间放图片或者文字

    效果图: 先贴代码 HTML: <div class="forshow middle"> <div class="flex"></ ...

  4. vertical-align:middle实现图片与文字垂直居中对齐

    css代码: header .logo{ display:inline-block; margin-left: 10px; width: 15%; line-height: 9.1rem; backg ...

  5. iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】

    以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...

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

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

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

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

  8. 图片与文字在div里实现垂直水平都居中

    第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...

  9. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

随机推荐

  1. mysql的授权命令

    #查看用户select user,host from mysql.user; (root,%),表示可以远程登录,并且是除服务器外的其他任何终端, 如CREATE USER 'azkaban'@'19 ...

  2. 【转帖】超能课堂(186) CPU中的那些指令集都有什么用?

    超能课堂(186)CPU中的那些指令集都有什么用? https://www.expreview.com/68615.html 不明觉厉 开始的地方 第一大类:基础运算类x86.x86-64及EM64T ...

  3. NoSQL数据库简介与产生

    关系型数据库所存在“问题” >利用ACID原则(原子性,一致性,隔离性,持久性)保证数据完整性: >行列的规范化存储: >预定义结构: >存储数据量“小”: >结构化查询 ...

  4. Java continue 、break、标签

    任何迭代语句的主体部分都可以用break和continue控制循环流程,其中break用于强行退出循环,不执行循环中剩余的语句, 而continue则停止当前的迭代,然后退回循环起始处,开始下一次迭代 ...

  5. JavaSE--jdbc编程

    JDBC全称为:Java Data Base Connectivity (java数据库连接),可以为多种数据库提供统一的访问.JDBC是sun开发的一套数据库访问编程接口,是一种SQL级的API.它 ...

  6. C语言No such file or directory错误

    昨天晚上因为这个错误,都没睡好觉 早上六点起来查资料,换了个绝对路径就行了 #include"D:\软工专业\数据结构PPT和作业\实验作业\实验上机\单链表的基本操作\HeadFile.h ...

  7. 【Activiti】为每一个流程绑定相应的业务对象的2种方法

    方式1: 在保存每一个流程实例时,设置多个流程变量,通过多个流程变量的组合来过滤筛选符合该组合条件的流程实例,以后在需要查询对应业务对象所对应的流程实例时,只需查询包含该流程变量的值的流程实例即可. ...

  8. python 基于detectron或mask_rcnn的mask遮罩区域进行图片截取

    基于示例infer_simple.py 修改165行vis_utils.vis_one_image为vis_utils.vis_one_image_opencv 在detectron.utils.vi ...

  9. python3 调用zabbix API实现批量增加删除主机,主机各种监控项------实战

    在以前的博客中谈到了利用zabbix接口来对主机进行批量的增删改查 这里在不用环境中实战遇到了不同问题,这里记录下来以便后续review 以下为实战中获取token的代码,在zabbix标准接口文档中 ...

  10. idea安装完成后要做的几件事(设置字体、编码、行号)

    1.设置字体大小和样式 打开设置:File-->Settings 看到如下界面,输入font,点击Editor目录下的Font设置字体大小和样式: Font:字体样式 size:字体大小 Fal ...