css中文字垂直底部

在CSS中，有时需要使文字垂直底部对齐，而不是默认的垂直居中对齐。下面介绍一些实现方法。

/* 方法一：使用'line-height'属性 */
.container{
    height: 100px;
    line-height: 100px; /* 等于容器高度 */
}
.text{
    display: inline-block; /* 可以使宽度自适应 */
    vertical-align: bottom;
}

/* 方法二：使用'flex'布局 */
.container{
    display: flex;
    align-items: flex-end;
}
.text{
    width: 50%;
}

/* 方法三：使用'position'和'transform'属性 */
.container{
    position: relative;
    height: 100px;
}
.text{
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
}

/* 方法四：使用'grid'布局 */
.container{
    display: grid;
    grid-template-rows: auto 1fr; /* 第一行自适应高度，第二行占剩余高度 */
}
.text{
    align-self: end; /* 对齐底部 */
} 

以上就是几种实现CSS中文字垂直底部对齐的方法，可以根据实际需求选择适合的方法。