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
  • 阅读 ( 1486 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
联系我们:uytrv@hotmail.com 问答工具