图片样式为

以下为引用的内容:
.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. 搭建本地parcel仓库

    参考:https://www.cloudera.com/documentation/enterprise/6/6.2/topics/cm_ig_create_local_parcel_repo.htm ...

  2. 有人向你扔了一个bug,哈哈哈哈

    有人向你扔了一个bug. "26楼会议室的灯亮着.它应该是熄灭着的." bug的备注里写道"你应该能在5分钟内搞定,只要按一下开关就好了."你去了26楼的会议室 ...

  3. python-day31(正式学习)

    一.单机架构 应用领域: 植物大战僵尸 office 二.CS架构 应用领域: QQ 大型网络游戏 计算机发展初期用户去取数据,直接就去主机拿,从这里开始就分出了客户端和服务端. 客户端:用户安装的软 ...

  4. [Next] 六.next的优化

    导出 html 并开启服务 我们将 pages 下页面导出为静态 HTML 页面.首先,next.config.js 在应用程序的根目录中创建一个名为的文件,并添加以下内容 exportPathMap ...

  5. Spring Cloud Alibaba nacos 配置中心使用

    背景 上一文我们讲到了如何去搭建注册中心,这一次我们讲述如何使用nacos作为注册中心 spring-cloud-alibaba-basis 创建基础依赖 首先我们创建一个spring-cloud-a ...

  6. 将Abp的UnitTest中的InMemory改为SQLite in memory

    添加nuget包 Microsoft.EntityFrameworkCore.Sqlite 添加ServiceCollectionRegistrarSqlite public static class ...

  7. HTML5-placeholder属性

    HTML 5<input> placeholder属性 placeholder属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. ...

  8. Auto-increment 自动增长

    Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INCREMENT 字段 我们通常希望在每次插入新记录时,自动地创建主键字段的值. 我们可以在表中创建一个 auto- ...

  9. [转载]MySQL之char、varchar和text的设计

    [转载]MySQL之char.varchar和text的设计 来源:https://www.cnblogs.com/billyxp/p/3548540.html 首先我们先普及一下常识: 1.char ...

  10. qt webengineview 加载本地资源方式

    一.如果把资源添加到本地资源qrc库里了,请使用 ui->preview->setUrl(QUrl("qrc:/HelloWorld2.html")): 二.如果没有现 ...