一块文字靠近页面底部并居中

一只小红鸭

已于 2023-12-20 17:43:24 修改

阅读量189

点赞数

分类专栏： CSS 文章标签：前端 javascript 开发语言

于 2023-09-18 23:07:12 首次发布

本文链接：https://blog.csdn.net/weixin_50632313/article/details/133000473

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.法一（其实和法二一样）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .account-jump {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 10%;
    }

    .jump {
        text-decoration: underline;
        color: #007aff;
    }

    .cool {
        text-align: center;
    }
</style>

<body>
    <!-- 
        主要的解决思路是先看成一块(div)
            .account-jump {
                position: absolute;
                bottom: 10%;
                left: 50%;
                transform: translate(-50%);
            }
     -->

    <div class="account-jump">
        <span>暂时未拥有账号？</span>
        <span type="text" class="jump">申请一个账号</span>
        <p class="cool">持续前端开发</p>
    </div>

</body>

</html>

2.法二：

注意：父级一定要有宽高，不然一个字都不会显示！！！！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father{
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .account-jump {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 10%;
    }

    .jump {
        text-decoration: underline;
        color: #007aff;
    }

    .cool {
        text-align: center;
    }
</style>

<body>
    <!-- 在项目中使用：
        父相(position: relative;)----在目前代码的基础上，在最外面嵌套一层div，注意：父级一定要有宽高，不然一个字都不会显示！！！！
        子绝(position: absolute;)
        left:50%;
        transform: translate(-50%); -->


    <div class="father">
        <div class="account-jump">
            <span>暂时未拥有账号？</span>
            <span type="text" class="jump">申请一个账号</span>
            <p class="cool">持续前端开发</p>
        </div>
    </div>


</body>

</html>