用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 ...
随机推荐
- python函数 -- 作用域,异常处理
1.def语句和参数 python定义函数的关键词为def,格式如下: def 函数名([变元],[变元],....) #保存在变元中的值,在函数返回后该变元就会被销毁了. 2.返回 ...
- python中迭代器和生成器的详细解释
https://www.cnblogs.com/wilber2013/p/4652531.html
- python线程的几种创建方式
Python3 线程中常用的两个模块为: _thread threading(推荐使用) 使用Thread类创建 import threading from time import sleep,cti ...
- 【笔记】vue实现简单项目和页面跳转
此项目适合不会前端,不会vue的人. 不会vue真正的开发,这里用vue和vant-ui简单搭一个商城app的tabbar和页面跳转. 装vue-cli3.0 根据官网快速上手搭建vant项目,官网 ...
- 一款完美代替微信小程序原生客服消息的工具:
一.设置:无需开发,多种回复(自动+人工) 自动回复形式有3种: 打开客服消息(用户只要和客服互动过一次,再次点击进入,会收到设置好的自动回复) 关键词回复(用户在小程序中回复某个关键词内容时,会 ...
- MySQL中自定义排序
在开发时候,我们经常使用的是默认的排序规则,但在某些特殊情况下,通过指定顺序来进行排序 -- fileld自定义排序时,应该是非主键的,否则主键是无效 SELECT * FROM customer W ...
- html/css中map和area的应用
一.使用方法: 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,use ...
- postgres中的函数
1.编写一个只有入参,没有出参的函数: CREATE OR REPLACE FUNCTION add(a NUMERIC, b NUMERIC) RETURNS NUMERIC AS $$ SELEC ...
- LINUX修改path环境变量
PATH用作运行某个命令的时候,本地查找不到某个命令或文件,会到这个声明的目录中去查找. 例如一般设定java的时候为了在任何目录下都可以运行bin文件夹下的命令.就将java的bin目录声明到pat ...
- paramiko:实现ssh协议,对linux服务器资源的访问
介绍 网络传输是遵循协议的,比如SSH,paramiko则是实现了SSHv2协议的一个python库(底层使用的是cryptography).有了paramiko之后,我们便可以通过python使用s ...