关于div居中的问题

作者：nowar 分类：【HTML&CSS】 时间：2007.11.13 03:23

No comments

如何将div居中对齐，百度一下，肯定会看到一篇这样的文章：

<!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" lang="zh-cn">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>居中div演示效果</title>  
<style type="text/css">  
.align-center{  
    margin:0 auto;      /* 居中 这个是必须的，，其它的属性非必须 */  
    width:500px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */  
    background:red;     /* 背景色 */  
    text-align:center; /* 文字等内容居中 */  
}  
</style>  
</head>  

<body>  
<div class="align-center">居中div演示效果</div>  
</body>  
</html>

　　它这个里面说到了用margin来将div居中对齐，其实，我发现一个小问题，就是单单用margin：0 auto；来将div居中，是不能绝对居中的！还要注意一个div的宽度问题。

　　我们试看它上面的代码中：它定义了div的宽度是500px（注意：它没有定义div的边框），那么我们来算算整个网页的实际宽度：以1024px像素为准，1024px—滚动条的宽度(17px)—左、右两条边框各2px=1003px。那么再减去div的宽度500px，也就是1003px—500px=503px。好，结果出来了，503px是奇数，不能被2整除，也就是说不能被div两边的空白像素所平摊，所以得出结论：用margin来控制div居中对齐，实际上还要考虑div的宽度设置，一定要将div的宽度设置为奇数！

Write a comment