当前位置: 沐风工作室 >> 网页设计 >>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; 这句就成,大家可以直接拿去使用。另外大家如果经常需要用到这些代码的话,可以把代码保持下来,需要用的时候拿来即可,这样就能够大大提升工作效率。


已帮助 635 人

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

发表评论:

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

沐风工作室-提供SEO培训,网站优化,互联网推广创业等资讯和服务,主要业务为SEO培训、作文代写、演讲稿代写、网站原创文章代写、SEO伪原创文章代写以及微信阅读增量等。

针对百度等搜索引擎的SEO系统实战培训

网站文章代写:高质量原创文章及伪原创文章
注:文章皆为手动编辑,确保质量和效果

刷微信阅读:价低、稳定、无风险

作文代写:各种题材及类型的作文

演讲稿代写:各种场合的演讲稿代写

广告位

沐风SEO工作室

微信:mufeng1156、QQ:631998395

地址:广州番禺厦滘地铁启梦创业广场

沐风工作室 - 提供SEO培训、网站优化、互联网推广创业等资讯和服务