Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

vertical-align:middle的居中细节调整

  使用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>
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^