第十七课程 div css当中的 DIV块状居中参数设置详细教程详解

asp老师 · 发表于 2014-12-4 21:43:38

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 asp老师于 2014-12-4 21:58 编辑

首先我们新建一个17.html的文件和17.css同时把17.css文件引入我们17.html当中；
17.html代码如下

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="aaa">111</div>
</body>
</html>

复制代码

17.css代码如下；

.aaa{background:#F00; width:960px; height:450px;}

复制代码

那么此时效果如下；

此时我们可以看到，现在的效果是这样的，但是我们会发现此时的会有一个蓝色的左面和上面都有个边距，(默认的是浏览器有8个px的大小边距的)那么我们通常可以这么来设置来取消这个边距白色的问题，因为我们正常的一个网页应该是没有这个的，所以我们可以在17.css当中加一个这样的css代码；如下

<font color="#ff0000">body{margin:0px; padding:0px;}</font>

复制代码

效这样呢，我们去取消了8个px的大小效果如下：

那么我们如何操作，才可以让这个div居中呢，我们可以用到这个代码

<font size="5"> margin:0px auto;</font>

复制代码

我们来分析下这个代码这个就是让这个div上下的边距为0px 左右2面自动处理，效果如下;

那么这样左右就可以自动调整了，margin:0px atuo; (这样的方法是比较好的，因为我们每个电脑的显示器分别率是不一样的，如果是我们给左右2个margin更具自己设定了一个数值的话，那么可能在不同的分辨率会出现错乱的页面效果，)
此时我们在17.html当中继续添加一个div 代码如下：

<body>
<div class="aaa">
<div class="ccc">12</div>
</div>
</body>

复制代码

css代码如下：

body{margin:0px; padding:0px;}
.aaa{background:#F00; width:960px; height:450px; margin:0px auto; }
.ccc{background:#FF0; width:860px; height:150px; margin:0px auto;}

复制代码

我们来分析这个代码：他也是让这个.ccc的div 居中；那么此时的效果如下

margin:50px 250px 10px 20px; 这样呢，就表示的数值是上右下左如果是margin:10px 30px; 就表示上下左右的数值

那么如果想要让我们的.ccc黄色的div为垂直居中的话，我们应该怎么办呢?可以设置它的边距margin的数值，当然也可以设置外面大的div的内边距的数值padding
那么我们可以回忆总结下知识点；
如果我们想要让一个div居中的话-那么就要考虑到2个因素一个是水平居中和一个是垂直居中；当然不管是什么定位，我们只要设置它或者是包含这个div的margin和padding的数值就可以了；

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！