网页水平垂直居中在不同分辨率的实现方法

　　烈火网(LieHuo.Net)教程 在制作网页过程中,通常通过以下方法,来实现网页水平垂直居中:

　　<div style=" width:900px; height:600px; position:absolute; top:50%; left:50%; margin-top:-300px; margin-left:-450px;"></div>

　　然而,在一些分辨率比较小的电脑,这样的方法,会使网页被截去一部分,比如在800*600的分辨率,虽然现在已经普遍不用800*600的分辨率了,但是在以下条件比较差的地方,还是有人在使用800*600.所以我们在设计过程中,一定要考虑到不同分辨率的问题.那么,如果上面的方法有问题的话,我们可以通过写一段JAVASCIRPT来调用不同的CSS.以下是JAVASCRIPT的代码:

　　以下是CSS的代码:适用于1024*768及其以上分辨率的:

　　width:900px; height:600px; position:absolute; top:50%; left:50%; margin-top:-300px; margin-left:-450px;

　　适用于800*600分辨率的:width:900px;(即网页的宽度)

　　在html页面分别引入CSS：

　　<link id="wide" title="wide" media="screen" href="css/1024.css" rel="stylesheet" type="text/css" />

　　<link id="narrow" title="narrow" media="screen" href="css/800.css" rel="alternate stylesheet" type="text/css" />

　　这样就可以在高分分辨率下实现水平居中，在低分辨率下，又不会有网页被截掉一部分的问题！

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!