用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 ...
随机推荐
- spring5源码分析系列(一)——spring5框架模块
spring总共大约20个模块,这些模块被整合在核心容器(Core Container).AOP和设备支持.数据访问及集成.Web.报文发送.Test 6个模块集合. 组成Spring框架的每个模块集 ...
- Mybatis数据基本操作
<insert id="doCreate" parameterType="News"><!--添加数据--> INSERT INTO n ...
- EM 算法(二)-KMeans
KMeans 算法太过简单,不再赘述 本文尝试用 EM 算法解释 KMeans,而事实上 KMeans 算是 EM 的一个特例 EM 算法是包含隐变量的参数估计模型,那对应到 KMeans 上,隐变量 ...
- Git 一般性操作
git全局设定 git config --global user.name “码云账号” git config --global user.email “码云注册邮箱” git 定位文件夹cd进入到需 ...
- 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
今天使用npm安装插件时出现了以下错误: 经查,原因:现用执行策略是 Restricted(默认设置) 解决办法: 1.win+X键,使用管理员身份运行power shell 2.输入命令:set-e ...
- golang(3):strings和strconv使用 & 时间和日期类型 & 指针类型 & 流程控制 & 函数
strings和strconv使用 . strings.HasPrefix(s string, prefix string) bool: // 判断字符串s是否以prefix开头 . . string ...
- luogu P4482 [BJWC2018]Border 的四种求法
luogu 对于每个询问从大到小枚举长度,哈希判断是否合法,AC 假的(指数据) 考虑发掘border的限制条件,如果一个border的前缀部分的末尾位置位置\(x(l\le x < r)\)满 ...
- [转]Opcode是啥以及如何使用好Opcache
转载链接:Opcode是啥以及如何使用好Opcache 啥是Opcode? 我们在日常的PHP开发过程中,应该经常会听见Opcache这个词,那么啥是Opcode呢? Opcache 的前生是 Opt ...
- mysql中case when then end的含义和用法
参见这篇博客:https://blog.csdn.net/rongtaoup/article/details/82183743 case when then else end 语句用于查询满足多种条件 ...
- 本人亲测-Setup Factory打包教程(整理并优化)
Setup Factory 9 总结 一:安装完毕立刻启动 result = Shell.Execute(SessionVar.Expand("%AppFolder%\\消息助手.exe&q ...