图片样式为

以下为引用的内容:
.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. VBnet窗口获取键盘输入

    https://blog.csdn.net/youyoulg/article/details/39120669 C# WinFrom捕获按键按下事件(一) https://blog.csdn.net/ ...

  2. 2019 徐州icpc网络赛 E. XKC's basketball team

    题库链接: https://nanti.jisuanke.com/t/41387 题目大意 给定n个数,与一个数m,求ai右边最后一个至少比ai大m的数与这个数之间有多少个数 思路 对于每一个数,利用 ...

  3. B.super_log(The Preliminary Contest for ICPC Asia Nanjing 2019)

    同:https://www.cnblogs.com/--HPY-7m/p/11444923.html #define IOS ios_base::sync_with_stdio(0); cin.tie ...

  4. AppCan模拟器调试

    来源: 1, 页面CSS调试 2, JS调试 3, 插件请打包后手机调试 4, 打开另一个页面示例: appcan.button("#myBtn", "ani-uct&q ...

  5. java限流工具类

    代码 import com.google.common.util.concurrent.RateLimiter; import java.util.concurrent.ConcurrentHashM ...

  6. Linux 安装 python3.6 ,并且配置 Pycharm 远程连接开发

    Linux下安装Python3.6和第三方库   如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!! ...

  7. 给定一个字符串,根据字符出现频率排序--Java实现

    题目描述: 给定一个字符串,请将字符串里的字符按照出现的频率降序排列. 示例 1: 输入:"tree" 输出:"eert" 解释:'e'出现两次,'r'和't' ...

  8. python cv2读取rtsp实时码流按时生成连续视频文件

    代码实现 # coding: utf-8 import datetime import cv2 import os ip = '192.168.3.160'.replace("." ...

  9. 【Groovy】 Groovy笔记

    一.简单了解Groovy Groovy简介: Groovy是基于JVM的敏捷开发语言,语法与Java类似,但更加简洁,容错性也比Java强,同时Java能非常好的契合(例如Groovy能够使用Java ...

  10. (转)Java并发编程:核心理论

    原文链接:https://www.cnblogs.com/paddix/p/5374810.html Java并发编程系列: Java 并发编程:核心理论 Java并发编程:Synchronized及 ...