要让文字在 <div>
元素的底部居中显示,你可以使用以下 CSS 属性和值组合:
div {
display: flex; /* 使用弹性布局 */
justify-content: center; /* 水平居中对齐 */
align-items: flex-end; /* 垂直底部对齐 */
}
上述 CSS 代码将使 <div>
元素内的内容垂直底部对齐,并水平居中对齐。
如果你只是想让文本垂直底部对齐而不是整个内容区域,则可以使用 display: inline-block;
属性来实现:
div {
position: relative; /* 设置相对定位 */
}
span {
display: inline-block; /* 内联块级元素 */
position: absolute; /* 设置绝对定位 */
bottom: 0; /* 相对于父元素底部对齐 */
left: 50%; /* 相对于父元素水平居中对齐 */
transform: translateX(-50%); /* 将元素向左偏移自身宽度的一半 */
}
在上述示例中,我们将 <span>
元素作为文本容器,并使用绝对定位将其放置在 <div>
元素的底部中间。通过设置 left: 50%;
和 transform: translateX(-50%);
,我们可以实现水平居中对齐。