span::before { width:100%; height:1px; font-size:1em; content:''; background:#fff; position:absolute; top:50%}
img { border:0; vertical-align:middle}
input, select { vertical-align:middle}
img + img, input + input, select + select { margin-top:-.14em}
-->

青色线text-top，紫色线baseline，黄色线middle，白线模拟视觉垂直中分线，一组两个，前一个为未加margin-top偏移。
img,input,select等和文本的垂直居中这些元素设置可以写成：
margin-top:-.14em; border:0; vertical-align:middle-----(根据实际字体情况，建议再微调.14值，也可用maring-bottom)

aAopPyZ|字

 
 
oFg
aAopPyZ|字

 
 
oFg
aAopPyZ|字
test

test

 
 
oFg
aAopPyZ|字
test

test

 
 
oFg
aAopPyZ|字
test

test

 
 
oFg
aAopPyZ|字
test

test

 
 
oFg

// span'), '::before').getPropertyValue(''));
// ]]>

图片 文字 input等垂直居中对齐的更多相关文章

  1. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  2. css 图片文字垂直居中

    先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...

  3. UIButton 设置图片文字垂直居中排列

    #pragma mark 按钮图片文字垂直居中排列 -(void)setButtonContentCenter:(UIButton *)button { CGSize imgViewSize,titl ...

  4. 微信小程序文字水平垂直居中对齐问题

    我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...

  5. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

  6. css图片文字

    1.浏览器是把 html 和 css 一起下载并执行的,计算机里把两件事情同时做  异步加载.计算机中的同步异步和我们生活中的正好是相反的. 补充: 同步,是所有的操作都做完,才返回给用户结果.即写完 ...

  7. iOS UIButton 图片文字上下垂直布局 解决方案

    实现如图所示效果: 这是一个UIButton,需要改变image和title相对位置. 解决如下: //设置文字偏移:向下偏移图片高度+向左偏移图片宽度 (偏移量是根据［图片］大小来的,这点是关键)b ...

  8. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  9. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

随机推荐

  1. python练习程序（c100经典例8）

    题目: 输出9*9口诀. for i in range(1,10): for j in range(1,i+1): print str(j)+"*"+str(i)+"=& ...

  2. S2sh整合MAven项目所需坐标大全

    <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> & ...

  3. zoj 3690 Choosing number

    题意    就是说给你 N 个人站成一排,现在每个人都可以选择 1-M 中间的任意一个数字,相邻的两个人数字相同,则他必须是是 >  K 的  问方案总数: 方法    先求出递推式,然后用矩阵 ...

  4. JS面向对象组件（四） -- 面向对象的继承

    什么是继承 •在原有对象的基础上,略作修改,得到一个新的对象 •不影响原有对象的功能 //父类 createPerson function createPerson(name,sex){ this.n ...

  5. jQuery autoComplete 样式

    前提:使用了jQuery-ui 官网:http://jqueryui.com/autocomplete/ /*** autocomplete ***/ .ui-widget-content { bac ...

  6. svn log 不显示日志的问题

    在你配好了Xcode里的SourceControl之后提交代码回复代码都很方便,可是为什么在Xcode上提交的log,在svn下面显示不出来! 解决办法是:在命令行下,先 svn update 一下, ...

  7. IOS 单例 创建方式

    @implementation Me static Car *sharedInstance= nil;//声明一个静态对象引用并赋为nil +(Me *) sharedInstance//声明类方法( ...

  8. [转] VS 整合NUnit进行单元测试

    Jeff Wong原文 5分钟实现VS2010整合NUnit进行单元测试 1.下载安装NUnit(最新win版本为NUnit-2.6.0.12051.msi) http://www.nunit.org ...

  9. 题目1003：A+B ---c_str()，atoi()函数的使用;remove , erase函数的使用

    #include<stdio.h> #include<stdlib.h> int sw(char *a){ ,c=; while(a[i]){ ') c=c*+a[i]-'; ...

  10. ASP.NET 使用application和session对象写的简单聊天室程序

    ASP.Net中有两个重要的对象,一个是application对象,一个是session对象. Application:记录应用程序参数的对象,该对象用于共享应用程序级信息. Session:记录浏览 ...