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

    css中怎么樣才能使內容在div的底部中間

    div+css

    代碼編纂器:Dreamweaver CS5

    方式/步調

    1. 1

      新建一個html文件,定名為test.html,用于講解css中怎么樣才能使內容在div的底部中心。

      91ef76c6a7efce1b35bd2bdfa051f3deb48f6515.jpg
    2. 2

      在test.html文件內,利用div標簽建立一個模塊,在其內部利用p標簽建立一行文字。

      caef76094b36acafbf7975e973d98d1001e99c0e.jpg
    3. 3

      設置div的class屬性為con,用于下面利用css對其進行樣式設置。

      4ec2d5628535e5dd44aa46ca79c6a7efce1b6225.jpg
    4. 4

      在test.html文件內,別離在css標簽內建立div和p元素的樣式設置。

      0b55b319ebc4b745542c5503c0fc1e178a82156e.jpg
    5. 5

      在css中,對類名為con的div進行樣式設置。設置其位置屬性為絕對定位(position:absolute),寬度為300px(width:300px),高度為300px(height:300px),布景顏色為黃色 (background:yellow)。

      f603918fa0ec08fa1879feb256ee3d6d55fbdaae.jpg
    6. 6

      在css中,對p元素進行樣式設置。設置其位置屬性為絕對定位(position:absolute),在div的底部(bottom:0),寬度為100%(width:100%),文字居中顯示(text-align:center)。

      203fb80e7bec54e7af69f70bb6389b504fc26a1a.jpg
    7. 7

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

      c2fdfc039245d68833865fb1abc27d1ed21b241b.jpg
    • 發表于 2019-09-17 23:12
    • 閱讀 ( 932 )
    • 分類:其他類型

    你可能感興趣的文章

    相關問題

    0 條評論

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