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

你可能感兴趣的文章

相关问题

0 条评论

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