CSS实现垂直居中的5种方法
作者:糖伴西红柿 来源:前端观察 时间:2009-03-04 12:53:00
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。
使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。)
方法一
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
<div id="wrapper"><div id="cell"><div class="content"> Content goes here</div></div></div>
#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}
优点:
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时, content 不会被截断
缺点:
Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签(其实没那么糟糕,另一个专题)
标签:垂直居中,方法,css,浏览器
0
投稿
猜你喜欢
asp显示左边的n个字符自动识别汉字的函数
2007-09-13 12:16:00
javascript中css的float特殊写法
2007-12-24 20:24:00
ASP获取ACCESS数据库表名及结构的代码
2011-04-15 10:50:00
浏览器根据什么来判定脚本失控?[译]
2009-02-20 13:36:00
如何用变量实现群聊和悄悄话?
2010-05-19 21:33:00
MySQL权限详解
2011-02-16 12:20:00
谈谈网页一屏有多大?
2007-12-21 12:28:00
Sub-Pixel Bug?!
2010-03-24 18:09:00
不是原型继承那么简单!prototype的深度探索
2008-03-07 12:42:00
asp使用XMLHTTP下载远程数据输出到浏览器
2007-11-04 10:34:00
Oracle 实现类似SQL Server中自增字段的一个办法
2009-08-02 07:51:00
Dreamweaver2004 中文乱码解决方案
2007-01-31 10:20:00
ASP用csDrawGraph组件制作饼图、柱状图
2008-04-25 22:58:00
在ASP中通过oo4o连接Oracle数据库的例子
2008-10-12 12:55:00
asp如何用JMail POP3接收电子邮件?
2010-06-13 13:09:00
楼层数横排比竖排好
2008-04-26 07:28:00
按钮表状态还是表动作?
2009-03-23 18:21:00
带你深入了解SQL Server 2008的独到之处
2009-01-07 14:20:00
ASP判断一个字符串中只包含字母和数字
2008-08-08 12:12:00
SQL Server2000的安全策略
2007-08-06 17:14:00