[分享]css文字最底部显示

CSS中有一个属性可以控制文字的垂直对齐，那就是verticalalign。verticalalign可以控制元素内的行内元素与周围元素的对齐方式，包括文字。当我们想让文字显示在元素的底部时，可以使用...

CSS中有一个属性可以控制文字的垂直对齐，那就是vertical-align
。vertical-align可以控制元素内的行内元素与周围元素的对齐方式，包括文字。

当我们想让文字显示在元素的底部时，可以使用vertical-align: bottom。

p {
height: 100px; /* 设置p标签高度 */
display: flex; /* 设置p标签为flex布局 */
align-items: flex-end; /* 让文字底部与p标签底部对齐 */
}

上面的代码使用了flex布局，即容器的align-items属性设置为flex-end，就能让元素内所有行内元素都垂直底部对齐。而文字本身是行内元素，所以也能被垂直对齐到底部。

除了使用flex布局，还可以使用position属性：

p {
height: 100px;
position: relative; /* 设置p标签为相对定位 */
}
p span {
position: absolute; /* 设置文字为绝对定位 */
bottom: 0; /* 让文字底部贴着p标签底部 */
}

上面的代码将p标签设置为相对定位，然后将文字包裹在一个span标签内，将span标签设置为绝对定位，并使用bottom: 0让文字底部贴着p标签底部。两种方法都能让文字在p标签的底部对齐，选择哪种方式取决于具体情况及个人偏好。