DIV水平居中-CSS教程

2009年9月2日 发表评论 阅读评论

在用CSS样式表进行网页布局时,DIV水平居中的问题时常碰到的,DIV水平居中最常用到的地方就是使整个页面水平居中,这在网页布局中应用最广泛也是基本的布局方式。下面是我收集总结的使用Div和CSS实现水平居中的方法以及使用js实现层居中的方法。

一、CSS DIV实现水平居中

使用margin:auto 0 与 text-aligh:center实现水平居中

在Internet Explorer 7、Firefox、Opera等现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。即:

#wrap { margin:0 auto;}

上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。请在现代浏览器(如Internet Explorer 7、Firefox、Opera等)中运行现在的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">

在Firefox等浏览器设定页面元素水平居中,只要指定margin:0 auto;即可,如下:

div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}

上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的,不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text- align属性值为center,这样页面内所有的元素都会自动居中,同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因 此我们要如此来写代码:

body {text-align:center;}
#wrap {text-align:left;}

这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果,我们就可以这样写我们的代码:

body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CSS+Div实现水平居中对齐的页面布局 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">

在Firefox等现代浏览器设定页面元素的水平居中,只要指定margin:0 auto;即可

div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}

在Internet Explorer 6 及以下的版本中我们还要做以下的设置:

body { text-align:center; }
div#wrap {
text-align:left;
}

不过这里有一个前提,就是设置居中的元素要有固定的宽度,比如这里我们设定了为760像素。

二,用JS使层居中

把如下代码加入区域中

<DIV id=L1 style="HEIGHT: 107px; LEFT: 341px; POSITION: absolute; 
TOP: 585px; WIDTH: 205px; Z-INDEX: 1">
 
<TABLE bgColor=#ffffff border=1 borderColorDark=#ffffff borderColorLight=#000000 
cellPadding=0 cellSpacing=0 width="100%">
 
<TR>
 
<TD height=1 width=178>□::BEST4U论坛::</TD>
 
<TD align=center onclick="L1.style.visibility='hidden'"
 
style="CURSOR: hand" width=21>х</TD></TR>
 
<TR vAlign=top>
 
<TD colSpan=2
 
height=91>欢迎光临本站!<BR><BR>本站域名:<BR>http://it.dengchao.org
 
</TD></TR></TABLE></DIV>
 
<SCRIPT LANGUAGE="JavaScript">
 
function moveit() //这个函数用于把层放到浏览器中间
 
{
 
L1.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2)+
document.body.scrollLeft;
 
L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2)+
document.body.scrollTop;
 
}
 
window.onload=moveit; //网面打开时时执行moveit()
 
window.onresize=moveit; //当调整浏览器大小时执行moveit()
 
window.onscroll=moveit; //当拉动滚动条时执行moveit()
 
</SCRIPT>

好了,使用DivCSS实现水平居中的方法以及使用js实现层居中的方法就介绍到这里。

本文收集整理自网络。

http://it.dengchao.org
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: DIV水平居中-CSS教程
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.