• <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>

    css如何設置div內的另一個div居中并置底

    css+div

    代碼編纂器:Dreamweaver CS5

    方式/步調

    1. 1

      新建一個html文件,定名為test.html,用于講解css若何設置div內的另一個div居中并置底。

      83025aafa40f4bfbe9337a410c4f78f0f63618c7.jpg
    2. 2

      在test.html文件內,利用div標簽建立兩個嵌套的div。代碼如下:

      bba1cd11728b47105f5c1ad9cccec3fdfc0323b0.jpg
    3. 3

      別離給兩個div設置class屬性為con和bot,本家兒要用于下面利用css對其進行樣式設置。

      5243fbf2b2119313345718a56a380cd791238d8b.jpg
    4. 4

      在test.html文件內的css標簽內,對類名為con的div進行樣式設置,設置寬度為800px(width:800px),高度為1000px(height:1000px),布景顏色為黑色(background:#000),居中顯示(margin:0 auto)。

      241f95cad1c8a7861092ad1b6809c93d70cf506f.jpg
    5. 5

      在test.html文件內的css標簽內,對類名為bot的div進行樣式設置,設置寬度為200px(width:200px),高度為150px(height:150px),布景顏色為紅色(background:red),文字居中顯示(text-align:center)。

      f3d3572c11dfa9eccd33b0026dd0f703918fc182.jpg
    6. 6

      最后,利用css對類名為bot的div進行居中置底的設置。設置其position為絕對定位(absolute), 固心猿意馬在底部(bottom:0),居中顯示(left:50%,margin-left:-100px)。

      83025aafa40f4bfbeb8a78410c4f78f0f7361848.jpg
    7. 7

      在瀏覽器打開test.html文件,查看實現的div居中置底結果。

      8601a18b87d6277faa5ad42d27381f30e924fc5f.jpg
    • 發表于 2019-09-19 17:01
    • 閱讀 ( 1380 )
    • 分類:其他類型

    你可能感興趣的文章

    相關問題

    0 條評論

    請先 登錄 后評論
    聯系我們:uytrv@hotmail.com 問答工具
  • <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>
    久久久久精品国产麻豆