当前位置: 沐风博客 >> 网页设计 >>正文

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

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

很多朋友在制作页面的时候,发现页面总是考左显示,无论怎么做都不能让页面居中对齐。事实上通过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编辑教程

企业网站优化视频教程

网站分类

SEO优化

→→ SEO教程

→→ SEO诊断

→→ SEO培训

→→ SEO算法

→→ SEO技术

→→ SEO杂谈

→→ SEO实验室

→→ SEO问答

写作与编辑

→→ 文案编辑

→→ 文章写作

→→ SEO文章

网站及平台运营

→→ 网站运营

→→ 网店运营

→→ 微信运营

→→ 微信公众号运营

→→ 微信视频号

→→ 网站建设

→→ 网页设计

→→ 转化率

营销推广

→→ 互联网创业

→→ 互联网资讯

→→ 网络推广

→→ 网络营销

→→ 百度推广

→→ 公众号推广

→→ 抖音推广

→→ 微博推广

其他分类

→→ 官方文档

→→ 大神专栏

→→ 友情链接平台

→→ 日常办公

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