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. 【转】Qt多线程操作界面---在QThread更新QProgressBar

    #include <QApplication> #include <QThread> #include <QMainWindow> #include <QPr ...

  2. 【C#学习笔记】网页弹出提示框

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. LCS nlog(n) 但最坏情况还是比较悲剧 转载的文章；

    最长公共子序列问题: 给定2个字符串,求其最长公共子串.如abcde和dbada的最长公共字串为bd. 动态规划:dp[i][j]表示A串前i个和B串前j个的最长公共子串的长度. 则 若A[i] == ...

  4. mysql的data数据库只有.frm 而.myd和.myi没有，使用正常

    正常 data目录下的数据库文件只要表结构文件frm文件...甚是不解  钻研过后知道 mysql的默认数据库引擎模式呗设置成了InnoDB innodb表没有没有MYD和.MYI,其数据文件对应于i ...

  5. 树莓派 安装 OpenCV 使用CMake 编译工程 最新版2015

    一.安装make,cmake sudo apt-get install make sudo apt-get install cmake 二.下载deb包 去这里下载libopencv_2.4.10.d ...

  6. Files

    write public static void write(CharSequence from, File to, Charset charset) throws IOException { asC ...

  7. selenium python （四）键盘事件

    #!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #在实际测试过程中,有时候我们需要使用tab键将焦点转移到下一个需要操作 ...

  8. n个数的最小公倍数

    Description 求n个数的最小公倍数.   Input 输入包含多个测试实例,每个测试实例的开始是一个正整数n,然后是n个正整数.   Output 为每组测试数据输出它们的最小公倍数,每个测 ...

  9. linux系统中内存爆满之后会如何？

    在使用python写程序的时候,发现一个可以无限迭代的迭代器,从而可以直接将系统中的内存占满,那么占满之后会发生什么呢? 1. 创建无限迭代,生成列表,如下: [root@python ~]# pyt ...

  10. 关于Activity的少许细节

    1.  对活动应用样式和主题 2.  隐藏活动标题 3. 显示对话框窗口 4. 显示进度对话框 1.  应用样式和主题 改成 android:theme="@android:style/Th ...