Web 技术研究所

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

怪异模式对vertical-align的影响

  在怪异模式中,vertical-align的行为会受到影响。因为怪异模式中的行盒子计算与普通模式不同,需要通过有效文本节点作为参照物才能计算出vertical-align的位置,在元素所在行中缺少有效文本节点就会导致vertical-align无法计算。
<style>
div {
  display:block;border:1px solid red;width:200px;
  height:70px;line-height:70px;
}
span {
  display:inline-block;width:100px;height:50px;background:#EEE;
  vertical-align:middle; /*没有效果*/
}
</style>
<div>
  <span></span>
</div>

  加上DOCTYPE后vertical-align可以正常工作 <!DOCTYPE html>
  不是因为怪异模式下的vertical-align无效,只是因为上面的例子中inline-block元素所在的行没有包含任何有效文本节点,从而导致垂直居中缺少参照物而无法计算。只要inline-block元素所在的行中包含有效文本节点即可正常工作。比如下面的这两种
<style>
div {
  display:block;border:1px solid red;width:200px;
  height:70px;line-height:70px;
}
span {
  display:inline-block;width:80px;height:50px;background:#EEE;
  vertical-align:middle;
}
</style>
<div id="div">
  <span></span>
  <span></span>
</div>

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