web development blog

> 前端技术 模拟td多行文字垂直居中,纯css实现

单行文字垂直居中只要通过line-height便可,当然也可以通过设置padding来处理,不过对 行多行文字垂直居中的话,行高line-height就不适合了,在没有定义高度的情况下,可以使用padding来 处理。

那么如果在固定高度内容实现多行文字垂直居中要该如何实现呢?这问题一度让大家很头疼啊。

定义有高度的可以分为两种情况:

一种是非IE浏览器,比较简单,在设置vertical-align:middle;外还应把它的 display属性设置为表格的table-cell属性就可以觖决。但是注意当 display属性为table-cell时,边框的宽度是算在width里面的;

IE浏览器 IE确实是个让人比较烦的家伙,特别是IE6,但没办法,目前使用IE6的人还是最多的 。

今天终于找到比较完美的方法解决这一问题:

原理:第一个div,display:inline以后作为行内元素,它的高度为100%,宽度却为0,相当于紧贴外层容器左边框的一条透明的线,这样就使得外层容器里面只存在一行。外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline,它对外和blank垂直居中,只要内部文字不超过blank的高度,这个效果将是完美的。虽然从语义化上讲,用空白div布局说不太过去,但是瑕不掩瑜;而zoom:1是为了触发hasLayout,达到兼容ie6,ie7.


/*css结构*/
*{ margin:0; padding:0;}
.box{ width:200px; height:300px; border:1px solid #f00; display:table-cell; vertical-align:middle;}
.blank{ display:inline; height:100%; width:0; vertical-align:middle; zoom:1;}
.con{ display:inline; width:100%; vertical-align:middle; zoom:1;}


//html结构
 
測試文字內容,測試多行文字垂直居中內容;測試文字內容,測試多行文字垂直居中內容;測試文字內容,測試多行文字垂直居中內容;測試文字內容,測試多行文字垂直居中內容;測試文字內容,測試多行文字垂直居中內容;測試文字內容,測試多行文字垂直居中內容;

演示文档:demo

-留言评论-

  • 留言载入中...

-拍砖-

 

首页|前端技术|编程/php|生活|关于我

Copyright © 2012 wmhfly.com