css中将文本显示在底部

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在网页设计中,有时我们需要将文本显示在底部,比如页脚信息、版权声明等。那么该如何实现呢?CSS为我们提供了多种方式。一、使用绝对定位我们可以给文本所在的容器设置position为relative,将文

在网页设计中,有时我们需要将文本显示在底部,比如页脚信息、版权声明等。那么该如何实现呢?CSS为我们提供了多种方式。
一、使用绝对定位
我们可以给文本所在的容器设置position为relative,将文本设置为绝对定位,并将bottom属性设为0,这样文本就会显示在容器的底部。
示例代码如下:
<style>
    .container {
        position: relative;
        height: 200px;
        padding: 20px;
    }

    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        color: #666;
    }
</style>

<div class="container">
    <p>这是一个容器</p>
    <p class="footer">这是底部文本</p>
</div> 

二、使用flex布局
我们也可以使用flex布局将文本显示在底部。将容器的display属性设置为flex,将flex-direction属性设置为column,使其子元素在竖直方向排列,将justify-content属性设置为space-between,让底部留出一定的间隔,最后将子元素的align-self属性设置为flex-end,文本就会显示在底部。
示例代码如下:
<style>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 200px;
        padding: 20px;
    }

    .footer {
        align-self: flex-end;
        color: #666;
    }
</style>

<div class="container">
    <p>这是一个容器</p>
    <p class="footer">这是底部文本</p>
</div> 

以上就是两种将文本显示在底部的CSS方法,根据实际情况选择合适的方法即可。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中将文本显示在底部

粉丝

0

关注

0

收藏

0

已有0次打赏