DW怎么設(shè)置DIV模塊在頁面中居中?
我要評論Dreamweaver中margin、padding可以讓div模塊在頁面居中，但如果是自適應(yīng)所有屏幕，包括手機(jī)屏幕依然可以自動上下左右居中，該怎么設(shè)置呢？下面我們就來看看詳細(xì)的教程。
Adobe Dreamweaver CC 2018 V18.0 中文/英文安裝版 32/64位
- 類型：網(wǎng)頁設(shè)計(jì)
- 大小：968MB
- 語言：簡體中文
- 時(shí)間：2017-10-19
1、先新建一個(gè)html文件，并在head中添加樣式表【<style type="text/css"></style>】。
2、在body中添加一個(gè)DIV，并引入一個(gè)CSS，命名為【aaa】。
3、給這個(gè)DIV添加背景色，并定義它的寬和高?！?span style="color: #ff0000">background: #FA2;width: 400px;height: 600px;】。
4、然后添加如下代碼?！?span style="color: #ff0000">position: fixed; left: 50%; top: 50%; z-index: 10;】。z-index是讓DIV模塊始終在最上端，也可以不添加?？梢钥吹紻IV塊到了右下角的位置。
5、然后我們依次定義它的位置。先使用【margin-top: -300px;】“-300px”這個(gè)數(shù)值就是DIV高h(yuǎn)eight: 600px;的一半，并添加為負(fù)值。可以看到DIV已經(jīng)默認(rèn)到上下居中的位置了。
6、先使用【margin-left: -200px;】“-200px”這個(gè)數(shù)值自然就是DIV寬width: 400px;的一半，并添加為負(fù)值。保存后刷新網(wǎng)頁可以看到DIV已經(jīng)左右居中了。
7、可以看到不管我們把頁面變成什么尺寸，DIV都會自動居中，是不是解決你的問題了呢？
以上就是DW讓DIV模塊在頁面中相對屏幕自動居中的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
dw cs6中div標(biāo)簽寬度和高度怎么設(shè)置?
DreamWeaver文字怎么居中對齊? dw垂直居中對齊的技巧
相關(guān)文章
dreamweaver怎么新建收藏夾并歸類資源？dreamweaver中收藏了很多東西，為了方便查找我們可以根據(jù)資源類型歸類，下面我們就來看看dreamweaver新建收藏夾并歸類的教程，需要2018-01-09
Dreamweaver怎么使用css選擇器中的類？Dreamweaver中css選擇器中有很多功能，想要使用其中的類，該怎么使用呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-09
Dreamweaver文件頭部信息有什么作用? dw查看文件頭部信息的教程
Dreamweaver文件頭部信息有什么作用？Dreamweaver制作的網(wǎng)頁由兩部分組成，一個(gè)是頭部信息，一個(gè)就是主體信息，今天我們就來介紹一下dw查看文件頭部信息的教程，需要的朋友2018-01-09
Dreamweaver網(wǎng)頁中的文本怎么添加背景色?
Dreamweaver網(wǎng)頁中的文本怎么添加背景色？Dreamweaver設(shè)計(jì)的網(wǎng)格，想要一小段文本中的文字添加背景色，該怎么添加呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-08
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接?
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接？Dreamweaver設(shè)計(jì)的網(wǎng)頁想要添加聯(lián)系我們的文字直接鏈接到電子郵箱，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參2018-01-05
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片?
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片？Dreamweaver設(shè)計(jì)的文本網(wǎng)頁太單調(diào)，想要給文本添加星空背景圖片，該怎么添加呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參2018-01-05
Dreamweaver怎么添加邊框? Dreamweaver邊框的制作方法
Dreamweaver怎么添加邊框？Dreamweaver想要制作一個(gè)紅色邊框，該怎么制作呢？下面我們就來看看Dreamweaver邊框的制作方法，需要的朋友可以參考下2018-01-04
Dreamweaver網(wǎng)頁怎么添加彈出窗口信息?
Dreamweaver網(wǎng)頁怎么添加彈出窗口信息？很多網(wǎng)站都有歡迎信息的彈窗，想要給網(wǎng)頁添加一個(gè)彈窗，該怎么添加呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-04
Dreamweaver怎么上傳站點(diǎn)到服務(wù)器?
Dreamweaver怎么上傳站點(diǎn)到服務(wù)器？Dreamweaver中制作好的玩野想要上傳到服務(wù)器，該怎么上傳站點(diǎn)呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-03
Dreamweaver怎么設(shè)置狀態(tài)欄文本?
Dreamweaver怎么設(shè)置狀態(tài)欄文本？Dreamweaver設(shè)計(jì)網(wǎng)頁的時(shí)候，想要制作在狀態(tài)欄制作顯示歡迎的話語，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-03
