[分享]css中将文本显示在底部

在网页设计中，有时我们需要将文本显示在底部，比如页脚信息、版权声明等。那么该如何实现呢？CSS为我们提供了多种方式。一、使用绝对定位我们可以给文本所在的容器设置为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方法，根据实际情况选择合适的方法即可。