CSS 如何使DIV层水平居中,站长地带碰到很多新手要实现css居中的效果,DIV本身没有定义css居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.这篇《DIV居中:3种CSS网页布局怎么让DIV居中》就是用来解决css居中问题。当然具体问题具体对待了。
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:
一、margin:0 auto 与 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> css居中-www.zzarea.com </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">