css+div
代碼編纂器:Dreamweaver CS5新建一個html文件,定名為test.html,用于講解css若何設置div內的另一個div居中并置底。
在test.html文件內,利用div標簽建立兩個嵌套的div。代碼如下:
別離給兩個div設置class屬性為con和bot,本家兒要用于下面利用css對其進行樣式設置。
在test.html文件內的css標簽內,對類名為con的div進行樣式設置,設置寬度為800px(width:800px),高度為1000px(height:1000px),布景顏色為黑色(background:#000),居中顯示(margin:0 auto)。
在test.html文件內的css標簽內,對類名為bot的div進行樣式設置,設置寬度為200px(width:200px),高度為150px(height:150px),布景顏色為紅色(background:red),文字居中顯示(text-align:center)。
最后,利用css對類名為bot的div進行居中置底的設置。設置其position為絕對定位(absolute), 固心猿意馬在底部(bottom:0),居中顯示(left:50%,margin-left:-100px)。
在瀏覽器打開test.html文件,查看實現的div居中置底結果。
0 篇文章
如果覺得我的文章對您有用,請隨意打賞。你的支持將鼓勵我繼續創作!