DW如何设定DIV控制模块在网页页面中垂直居中?

日期:2020-12-13 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

Dreamweaver中margin、padding可让div控制模块在网页页面垂直居中,但假如是自融入全部显示屏,包含手机上显示屏仍然能够全自动左右上下垂直居中,该如何设定呢?下面大家就看来看详尽的实例教程。

手机软件名字:
Adobe Dreamweaver CC 2018 V18.0 汉语/英文安裝版 32/64位
手机软件尺寸:
968MB
升级時间:
2017⑴0⑴9马上免费下载

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

2、在body中加上1个DIV,并引进1个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: ⑶00px;】“-300px”这个标值便是DIV高height: 600px;的1半,并加上为负值。能够看到DIV早已默认设置到左右垂直居中的部位了。

6、先应用【margin-left: ⑵00px;】“⑵00px”这个标值当然便是DIV宽width: 400px;的1半,并加上为负值。储存后更新网页页面能够看到DIV早已上下垂直居中了。

7、能够看到无论大家把网页页面变为甚么规格,DIV都会全自动垂直居中,是否处理你的难题了呢?

以上便是DW让DIV控制模块在网页页面中相对性显示屏全自动垂直居中的实例教程,期待大伙儿喜爱,请再次关心脚本制作之家。

有关强烈推荐:

Dreamweaver2018如何迅速插进按钮?

dw cs6中div标识宽度和高宽比如何设定?

DreamWeaver文本如何垂直居中对齐? dw竖直垂直居中对齐的技能