请问老师这个p标签的文字怎么实现在黄色盒子中水平居中,距离底边40px

请问老师这个p标签的文字怎么实现在黄色盒子中水平居中,距离底边40px

问题描述:

请问老师这个p标签的文字怎么实现在黄色盒子中水平居中,距离底边40px


尝试过的解决方式:使用定位、display都没能实现


相关截图:

https://img1.sycdn.imooc.com//climg/6139678809a6d9c812630641.jpg

相关代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body section {
            width: 1200px;
            height: 600px;
            margin: 100px auto;
            background-color: #f00;
            position: relative;
        }

        body section div {
            width: 400px;
            height: 300px;
            background-color: rgb(255, 255, 0);
            position: absolute;
            top: 30px;
            right: 0;
        }

        body section div p {
            text-align: center;
        }
    </style>
</head>

<body>
    <section>
        <div>
            <p>测试</p>
        </div>
    </section>
</body>

</html>



正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2021-09-09 10:33:17

同学你好,建议去掉黄色盒子设置的固定高度,让其由内容撑开高度,然后设置上下内边距为40px就可以实现效果了,示例:

https://img1.sycdn.imooc.com//climg/613971fc0943c74206210291.jpg

此时文字距离盒子底部就是40px的距离,如下:

https://img1.sycdn.imooc.com//climg/61397260095ca62407480985.jpg

祝学习愉快~

  • 提问者 子衿设计 #1

    不是的,是距离底边40px,顶边不是,黄色盒子高也是固定的

    2021-09-09 10:38:57
  • 好帮手慕慕子 回复 提问者 子衿设计 #2

    同学你好,可以给里面的p标签设置绝对定位实现效果,如下:

    https://img1.sycdn.imooc.com//climg/61397b6b092c870710820285.jpg

    效果如下图所示:

    https://img1.sycdn.imooc.com//climg/61397b8909f0267213580830.jpg

    祝学习愉快~

    2021-09-09 11:12:11
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师