当前位置: 沐风博客 >> 网页设计 >>正文 沐风博客,提供微信公众号阅读量、视频号点赞等服务,微信或者QQ联系

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

重点导读:代码很简单,代码里注意 margin: 0 auto; 这句就成,大家可以直接拿去使用。另外大家如果经常需要用到这些代码的话,可以把代码保持下来,需要用的时候拿来即可,这样就能够大大提升工作效率。
发布人:沐风 - 更新时间:2021-10-07 08:32:01 - 地址:http://www.tangmengyun.com/seo/1360.html - 浏览:5103

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

<style>
.main {margin: 0 auto; width: 1200px; background-color:#FFFFFF}
.main_q {width: 1200px; height:300px;}
</style>
<div class="main">
<div class="main_q">这里是内容部分</div>
</div>

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

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

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

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


互联网时代,搜索引擎/微信公众号/抖音/电商平台等给我们带来了诸多机遇,如何才能更好的把握,这就需要我们掌握必要的知识和技能!沐风博客分享SEO等网络营销推广技术和资讯,帮助大家更好的在互联网发展! - ICP备案号 湘ICP备2022004497号