Web 技术研究所

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

表格内的块元素居中问题

  块元素的性质我想大家都很了解,表格的性质大家也很了解。但是如果表格中放块元素呢!?这个用法有些诡异,但是在某些情况下会用的上。把块元素放入表格中就好比把石头放到衣柜里,浏览器到底会对这样的事情做如何的解析呢?我们就从测试结果来分析吧。
  我们都知道表格中的单元格自带垂直居中的性质,这是个很有趣的性质。“display:table-cell”的元素(单元格元素)对“vertical-align”有着特殊的解析方式。普通的元素设置上“vertical-align”只会作用在设置了这个属性的元素自己身上。单元格元素的位置是由表格来分配的,“vertical-align”作用在自身上显然是没意义的。所以单元格元素的“vertical-align”是作用在子元素上的,而且它作用在子元素上的优先级比子元素本身的“vertical-align”优先级还高。不仅如此,即使是块元素这样原本不支持vertical-align的子元素也被强制加上了“vertical-align”属性,这使得块元素在单元格中也得以垂直居中。在做低版本浏览器兼容的垂直居中时经常就是使用这个方式。
<!DOCTYPE html>
<style>
td {width:100px;height:100px;border:1px solid green;}
div {width:50px;height:50px;border:1px solid red;}
</style>
<table>
  <tr><td>
    <div></div>
  </td></tr>
</table>

  TD元素有“valign”和“align”两个属性,“valign”对应了CSS中的“vertical-align”,它的值也是对应的。而“align”虽然对应了“text-align”,但是值并不对应,并且存在兼容性差异。所以对于水平居中就得从长计议了。我们先试试直接在CSS中的“text-align”,上面的代码改td的样式就行
td {
  width:100px;height:100px;border:1px solid green;text-align:center;
}

  直接设置CSS中的“text-align”只有在低版本浏览器(IE7-)中生效。但是如果使用TD标签的align属性就可以居中。 <table>
  <tr><td align="center">
    <div></div>
  </td></tr>
</table>

  也就是说,“align="center"”属性在CSS中对应的不是“text-align:center”,直接从浏览器的调试工具中可以找到这个属性。
  只有在IE中才是center,其它浏览器有自己的前缀。所以直接使用“text-align:center”在现代浏览器中对块元素是无效的(高版本的IE也是输出center,但是不兼容直接设置的center,需要使用-ms-center)。如果非要使用CSS来做这个设置就应该使用兼容的代码。 <!DOCTYPE html>
<style>
td {
  width:100px;height:100px;border:1px solid green;
  text-align:-webkit-center;
  text-align:-moz-center;
  text-align:-ms-center;
  *text-align:center;
}
div {width:50px;height:50px;border:1px solid red;}
</style>
<table>
  <tr><td>
    <div></div>
  </td></tr>
</table>
  这个方法可以有,但是我不赞成这么用。优秀的代码应该尽量避免浏览器专用代码和CSS-hack的使用,单元格元素既然提供了“align”属性我们就应该好好的利用它来避免一堆不必要的CSS。
  这篇文章有点水了,最近没想到啥题材了。。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^