欢迎光临欧亿注册SEO培训工作室,我们提供系统专业的网站搜索引擎优化实战培训
当前位置: 欧亿_欧亿注册 >> 网页设计 >>div+css如何让页面居中显示

div+css如何让页面居中显示

很多朋友在制作页面的时候,发现页面总是考左显示,无论怎么做都不能让页面居中对齐。事实上通过div+css让页面具体显示是很简答的,下面给大家看下代码:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>div+css如何让页面居中显示</title>

<style>

.main {margin: 0 auto; width: 1200px; background-color:#FFFFFF}

.main_q {width: 1200px; height:300px;}</style></head>

<body style=" background-color: #993300">

<div class="main">   <div class="main_q">

这里是内容部分

</div>

</div>

</body>

</html>

上面的代码大家可以复制下来,保存文件为html文件,然后看看效果,会发现网页是居中对齐的。

这里大家要注意给页面加个外层的框架,也就是前面代码中的main这个样式,margin: 0 auto; 想要页面居中显示这句是必不可少的。我们可以把后面的代码都包含在 main 这个div里面,也可以把main这个div看成是区域,页面有几个内容区块就复制出几个区域。

这里笔者建议大家不必对这些代码名词做深度的研究,只需要记住它是怎么用的就可以了。笔者甚至有很多的html代码都不知道拼写,但这不影响到笔者制作页面模板,因为dreamweaver里面已经集成了这些css样式,我们只需要调用就行。当然,如果你直接使用记事本来制作页面的话,那么就需要纯手动去敲代码,这也是没有必要的!

以上就是关于div+css如何让页面居中显示的内容,代码很简单,代码里注意 margin: 0 auto; 这句就成,大家可以直接拿去使用。另外大家如果经常需要用到这些代码的话,可以把代码保持下来,需要用的时候拿来即可,这样就能够大大提升工作效率。


已帮助 828 人

本站内容大部分由欧亿_欧亿注册原创,少部分内容来源于网络,如有侵权请与我们联系,我们会及时删除!
责任编辑:欧亿注册 | 发布时间:2019年12月05日16点31分08秒 | 本文永久地址为 http://www.jzwly.com/seo/1360.html

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

欧亿注册SEO培训,提供系统专业的欧亿平台培训,帮助大家更快掌握SEO优化技巧。同时免费提供前沿的欧亿注册资料,这些实战欧亿注册都是经验积累,相信能给大家带来启示!

欧亿_欧亿注册地址:广州.厦滘 | 推荐:百度搜索指数如何刷