新设计人网[www.sjidea.com],努力打造为新设计服务综合资讯第一网!
全新域名:[www.sjidea.com]

新设计人资源网

首页 /教程/网页设计/Dreamweaver教程 / 正文

DW怎么设置DIV模块在页面中居中?

admin 2022-05-24 21:19:55 0 次浏览

Dreamweaver中margin、padding可以让div模块在页面居中,但如果是自适应所有屏幕,包括手机屏幕依然可以自动上下左右居中,该怎么设置呢?下面我们就来看看详细的教程。

1、先新建一个html文件,并在head中添加样式表【<style type="text/css">】。

2、在body中添加一个DIV,并引入一个CSS,命名为【aaa】。

3、给这个DIV添加背景色,并定义它的宽和高。【background: #FA2;width: 400px;height: 600px;】。

4、然后添加如下代码。【position: fixed; left: 50%; top: 50%; z-index: 10;】。z-index是让DIV模块始终在最上端,也可以不添加。可以看到DIV块到了右下角的位置。

5、然后我们依次定义它的位置。先使用【margin-top: -300px;】“-300px”这个数值就是DIV高height: 600px;的一半,并添加为负值。可以看到DIV已经默认到上下居中的位置了。

6、先使用【margin-left: -200px;】“-200px”这个数值自然就是DIV宽width: 400px;的一半,并添加为负值。保存后刷新网页可以看到DIV已经左右居中了。

7、可以看到不管我们把页面变成什么尺寸,DIV都会自动居中,是不是解决你的问题了呢?

热门资讯
Dreamweaver网页怎么...
Dreamweaver网页怎么插入单选按钮?Dreamweaver设计网页的时候,需要使用单选按钮,...
Dreamweaver怎么替换...
Dreamweaver怎么替换文字?dw制作网站网页的时候,内容需要进行批量替换,该怎么替换文字呢?...
Dw CC 2018怎么设置上...
Dw CC 2018怎么设置上载前先保存文件?Dreamweaver很常用,每次上载想要先保存文件,...
Dw2018键盘快捷键怎么设置...
Dw2018键盘快捷键怎么设置?Dw2018中可以设置键盘快捷键,该怎么设置呢?下面我们就来看看Dr...
Dreamweaver怎么给淘...
DW怎么给淘宝店招添加链接?淘宝店铺装修的时候,想要给店招添加跳转链接,该怎么添加呢?今天我们就来看...
Dreamweaver CS3...
Dreamweaver CS3复选框怎么用?Dreamweaver CS3制作网页的时候,经常使用复...
Dreamweaver2018...
Dreamweaver2018怎么开启临时文件预览? Dw2018中制作的网页想要进行预览,该怎么使...
DW2021怎么下载? Dre...
DW2021怎么下载?DW2021版本想要下载安装,该怎么下载呢?下面我们就来看看Dreamweav...
Dreamweaver修改后的...
Dreamweaver修改后的网页运行页面不变该怎么办?Dreamweaver对某些网页进行了修改,...
DwCC2018双字节内联输入...
DwCC2018双字节内联输入怎么实现?Dreamweaver2018中可以设置上允许双字节内联输入...