使用vertical-align:middle可以让行级元素垂直居中，但这个居中是以文字的中线来计算的，而文字的中线在不同的字体上不同，甚至相同的字体在不同的浏览器上显示的都不同。所以直接使用vertical-align:middle很难完美居中，因此需要其它调整。
运行<!DOCTYPE html>
<style>
div {
  border:1px solid red;
  width:200px;
  height:100px;
  line-height:100px;
  text-align:center;
}
span {vertical-align:middle;}
#box {
  display:inline-block;
  width:100px;
  height:98px;
  background:#EEE;
}
</style>
<div>
  abc<span id="box"></span>def
</div>
　　当容器内存在vertical-align:middle元素时，它们的中线会被对其到所在行的基线上。而所在行的基线未必是中线，基线与中线偏离的距离就是vertical-align:middle垂直居中时候出现的偏离距离。
　　基线与中线的位置差异会受到字体、字形、字号，等影响。而且在不同浏览器上字体的渲染还存在差异，这样就不容易计算具体的偏差。但我们可以取消掉基线和中线的位置差，做法是将字号改到0，也就是不在行中直接使用文本节点。
运行<!DOCTYPE html>
<style>
div {
  border:1px solid red;
  width:200px;
  height:100px;
  line-height:100px;
  text-align:center;
  font-size:0px;
}
span {
  vertical-align:middle;
  display:inline-block;
  font-size:1rem;
}
#box {
  width:100px;
  height:98px;
  background:#EEE;
}
</style>
<div>
  <span>abc</span><span id="box"></span><span>def</span>
</div>

vertical-align:middle的居中细节调整的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  3. echarts使用------地图生成----省市地图的生成及其他相关细节调整

    为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. webim-界面细节调整

    1)左侧css调整 3)界面和滚动条美化 8)界面

  6. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  7. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  8. css 居中，中央

    在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...

  9. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

随机推荐

  1. C语言的本质（27）——C语言与汇编之计算机结构

    现代计算机都是基于冯·诺依曼或哈佛体系结构的,不管是嵌入式系统.个人电脑还是服务器.这种两种体系结构的主要特点是:CPU和内存是计算机的两个主要组成部分,内存中保存着数据和指令,CPU从内存中取指令执 ...

  2. Search in Rotated Sorted Array I II

    Search in Rotated Sorted Array Suppose a sorted array is rotated at some pivot unknown to you before ...

  3. axis2之webservice

    Axis2之webservice超详细教程 Axis2是一套崭新的WebService引擎,该版本是对Axis1.x重新设计的产物.Axis2不仅支持SOAP1.1和SOAP1.2,还集成了非常流行的 ...

  4. DBS小结

    <数据库系统原理>主要介绍的是数据库技术的基本原理.方法和应用技术. 它可以使我们能有效地使用现有的数据库管理系统和软件开发工具,掌握数据库结构的设计和数据库应用系统的开发原理. 在这里, ...

  5. 编写javascript的基本技巧

    第一.编写可维护的代码 什么叫着编写可维护的代码呢?就是当我的做出来的项目,拿给其它编码团队能很快的看懂 你编写的代码,你的整个项目的逻辑等等.一个项目的修改维护是要比开发一个项目的成本 是要高的.例 ...

  6. JS中的Function对象

    Function是函数的原型,所有的函数都来源于Function,获得函数的方法有两种类型,分为动态函数和函数继承. 动态函数 创建一个Function语法: var func = new Funct ...

  7. 在 Parallels Desktop 中，全屏模式使用 Win7，唤醒时黑屏

    在Parallels Desktop中,全屏模式下使用Win7,如果Mac电脑自动休眠了,则无法再次唤醒了,唤醒时黑屏. 博主的Mac是2014款MBPR,键盘上所有的键都试过,还是无法唤醒电脑,每次 ...

  8. for练习--侦察兵

    static void Main21侦察兵(string[] args) { //某侦察队接到一项紧急任务,要求在A.B.C.D.E.F六个队员中尽可能多地挑若干人,但有以下限制条件: //侦察兵A和 ...

  9. C#4 for循环 迭代法 穷举法应用

    for()循环. 四要素: 初始条件,循环条件,状态改变,循环体. 执行过程: 初始条件--循环条件--循环体--状态改变--循环条件.... 注意:for的小括号里面分号隔开,for的小括号后不要加 ...

  10. C# 输入输出 常量变量

          //输出 Console.WriteLine("这是一行文字"); 自动回车的. Console.Write("Hello world");  不带 ...