用CSS如何实现单行图片与文字垂直居中
图片样式为
| 以下为引用的内容: .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如何实现单行图片与文字垂直居中的更多相关文章
- css 单行/多行文字垂直居中问题
例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...
- css实现固定高度及未知高度文字垂直居中的完美解决方案
在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...
- css横线中间放图片或者文字
效果图: 先贴代码 HTML: <div class="forshow middle"> <div class="flex"></ ...
- vertical-align:middle实现图片与文字垂直居中对齐
css代码: header .logo{ display:inline-block; margin-left: 10px; width: 15%; line-height: 9.1rem; backg ...
- iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】
以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...
- CSS 之 控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
- css控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...
- 图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现 <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...
- css 单行图片文字水平垂直居中汇总
(1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...
随机推荐
- excel经典图表
柱形图: 点击图表,选择数据,添加列 选择展示的列区域数据,编辑水平分类轴,选择按年份统计 效果图: 更改图表类型: 折线图或面积图: 饼图或圆环图: 散点图或气泡图: 组合图: 更改原有图表为组合图 ...
- 【Spring 源码】Spring 加载资源并装配对象的过程(XmlBeanDefinitionReader)
Spring 加载资源并装配对象过程 在Spring中对XML配置文件的解析从3.1版本开始不再推荐使用XmlBeanFactory而是使用XmlBeanDefinitionReader. Class ...
- [python] 进度条效果
method 1 如果出现多行显示,添加选项 tqdm(iter,ncols=40) """ ncols : int, optional The width of the ...
- 在PostgreSQL中 pg_start_backup 做了什么?
# 在PostgreSQL中 pg_start_backup 做了什么?HM 2019-07-30 ## pg_start_backup 做一个备份开始标记,还做了一些其他的操作,下面进行探寻. * ...
- Spring(十三)-- Spring 事务
Spring 事务 1. 回忆之前事务知识点 一:事务的概念 将一系列的数据操作捆绑在一起,成为一个整体进行统一管理! 一条或者多条sql语句的集合! 二:事务的ACID特性 原子性(Atomic ...
- python之成像库pillow
目录 python之成像库pillow 官方文档 图像模块(Image.Image) Image模块的功能 Image.new(mode,size,color): Image.open(file,mo ...
- 基于Hadoop伪分布式集群搭建Spark
一.前置安装 1)JDK 2)Hadoop伪分布式集群 二.Scala安装 1)解压Scala安装包 2)环境变量 SCALA_HOME = C:\ProgramData\scala-2.10.6 P ...
- Linux-2.1vim简单使用
1.用vim打开文件,文件内容显示在终端,命令模式无法编辑 vim 1.txt vi 1.txt 2.使用a,i,o,shift+o编辑文件,按Esc退出编辑模式 i 插入在光标前 a 插入在光标后 ...
- maven项目转换为gradle项目
进入到项目更目录,运行 gradle init --type pom 上面的命令会根据pom文件自动生成gradle项目所需的文件和配置,然后以gradle项目重新导入即可.
- echarts is not defined解决方案
最近在写一个类似于vue的一种cola-ui框架,有兴趣的朋友可以了解一下:http://legacy.cola-ui.com/: 项目中有个业务需要引入Echarts图表的需求,由于是前后端没有分离 ...