用户名:   密码:    忘记密码  注册
我推信息网 > 学习园地 > 正文

div+css实现td的valign垂直居中属性

2010年11月12日
信息简介:css对文本垂直居中有相关的属性:vertical-align,但是它只对HTML元素中拥有valign特性的元素生效。例如表格元素中的

页面制作时垂直居中总是让人头疼的一件事情,之前写过css里如何实现valign属性的功能?,现在重新整理下。

css对文本垂直居中有相关的属性:vertical-align,但是它只对HTML元素中拥有valign特性的元素生效。例如表格元素中的<td>、<th>、<caption>等,而<div>、<span>元素并没有valign特性的,使用vertical-align对这些元素并不起作用。

下面是我常用到的解决方法: 

1、单行垂直居中
   如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:  

div {  
        height:30px;  
        line-height:30px;  
        overflow:hidden;  
 }


这段CSS代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。

不过很遗憾的告诉你,在IE6及以下版本中,这种方法是不支持对图片设置垂直居中的。


2、多行未知高度文字的垂直居中
    如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下面的代码:

div {  
         padding:15px;  

这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的哦。


3、多行文本固定高度的居中
    在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

div#wrap {  
        height:400px;  
        display:table;  
}  
div#content {  
        vertical-align:middle;  
        display:table-cell;  
        border:1px solid #FF0099;  
        background-color:#FFCCFF;  
        width:760px;  

这个方法应该是很理想了,可是IE6以下的版本 并不能正确地理解display:table和display:table-cell,因此这种方法在IE6及以下的版本中是无效的。

嗯,这让人很郁闷!不过还是有解决办法的。

4、多行文本固定高度的居中优化改进
    在IE6及以下版本中,在高度的计算上存在着缺陷的。在IE6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:

<div id=”wrap”>
    <div id=”subwrap”>
        <div id=”content”>
        </div>
    </div>
</div>

 如果我们对subwrap进行了绝对定位,那么content也会继承这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进行相对定位的时候,你使用的100%分比将不再是content原有的高度。要是我们设定了subwrap的position为40%,那要想使content的上边缘和wrap重合的话就必须设置top:-80%;如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去,当我们把content也设置50%的时候它就正好垂直居中了。所以我们可以使用这中方法来实现IE6中的垂直居中代码如下:

div#wrap {  
        border:1px solid #FF0099;  
        background-color:#FFCCFF;  
        width:760px;  
        height:400px;  
        position:relative;  
}  
div#subwrap {  
        position:absolute;  
        border:1px solid #000;  
        top:50%;  
}  
div#content {  
        border:1px solid #000;  
        position:relative;  
        top:-50%;  

当然,这段代码只能在IE6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出处相同还是什么原因,似乎很多人都不愿意去解释IE6中这这个Bug的原理,我也只是了解了一点点,还得继续深入研究)


5、垂直居中完美的解决方案
    综合以上的方法我们可以得出一个比较完美的解决方案,只是要用到一些CSS hack的知识。

div#wrap {   
        display:table;   
        border:1px solid #FF0099;  
        background-color:#FFCCFF;  
        width:100%;  
        height:100%;  
        _position:relative;  
        overflow:hidden;  
}  
div#subwrap {  
        vertical-align:middle;  
        display:table-cell;  
        _position:absolute;  
        _top:50%;  
}  
div#content {  
        _position:relative;  
         _top:-50%;  


至此,一个完美的居中方案就产生了。值得注意的是垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同。

    平时我们在做网页设计或网站模板输出时往往会遇见像内容或图片要垂直居中的问题,这些问题看起来似乎是很简单的。但要是没有正确的真正的了解这些知识在不同的浏览器下就很容易会问题哦!有人告诉我们有问题了,或许还不知道是怎么一回事。

(阅览次数:6198次)【关闭
上一条: 如何 简单加密ASP代码
下一条: Photoshop 小技巧集锦八十条
你认为此条信息得分为:
25% 75% 0% 0% 0%
很好 一般 不行
验证字符:
网友昵称: (Ctrl+Enter)
发表评论:
以下评论只代表网友个人观点,不代表我单位观点
暂时为空!
网站首页 -  政策法规 -  联系我们 -  免责申明 -  时尚一族 -  友情链接 -  关于我们 -  设为首页 -  加入收藏
版权所有:我推信息网 关键字:我推信息网 wotui 我推荐 我推
域 名:www.wotui.net 联系QQ (08:30-22:00在线): 邮 箱:yahali@sina.com
中华人民共和国电信与信息服务业务经营许可证

 

 

 

 

公共信息安全网络监察

经营性网站备案信息

不良信息举报中心 中国文明网络传播