如何将垂直旋转文本对齐到条形图底部？

我制作的条形图带有垂直旋转的文本，希望将这些文本对齐到每个条形的底部，尝试查找相关解决方案但未找到问题所在。

现有代码 #

HTML

<div class="vbc-bar-container" id="vbc-bar-6677d489b49f0">
    <div class="vbc-bar animated" data-percentage="75" style="--height: 75%; height: 75%;">
        <span class="vbc-title">Sales Growth</span>
        <span class="vbc-percentage">75%</span>
    </div>
</div>

CSS

.vbc-bar-container {
    width: 100px;
    height: 300px;
    border: 1px solid green;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-right: 0.3rem;
    margin-left: 0.3rem;
}

.vbc-bar {
    width: 100%;
    background-color: green;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    height: 0;
    transition: height 2s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.vbc-title {
    /*writing-mode: vertical-rl;*/
    transform: rotate(-180deg);
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    white-space: nowrap;
    font-size: 14px;
    color: #000;
}

.vbc-percentage {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    margin-top: 10px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    let bars = document.querySelectorAll('.vbc-bar');

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let bar = entry.target;
                let percentage = bar.getAttribute('data-percentage');
                bar.style.height = percentage + '%';

                let percentageText = bar.querySelector('.vbc-percentage');
                let currentPercentage = 0;
                let increment = setInterval(() => {
                    if (currentPercentage >= percentage) {
                        clearInterval(increment);
                    } else {
                        currentPercentage++;
                        percentageText.textContent = currentPercentage + '%';
                    }
                }, 20);

                observer.unobserve(bar);
            }
        });
    }, {
        threshold: 0.1
    });

    bars.forEach(bar => {
        observer.observe(bar);
    });
});

解决方案 #

问题核心：标题放在条形内部导致定位受条形高度影响，且重复设置transform属性导致旋转效果冲突。

修改步骤：

1. 调整HTML结构：将标题移到容器层级，脱离条形元素
2. 修正CSS定位与旋转：统一transform设置，调整旋转原点，固定底部对齐

修改后的代码

HTML

<div class="vbc-bar-container" id="vbc-bar-6677d489b49f0">
    <span class="vbc-title">Sales Growth</span>
    <div class="vbc-bar animated" data-percentage="75" style="--height: 75%; height: 75%;">
        <span class="vbc-percentage">75%</span>
    </div>
</div>

CSS

.vbc-bar-container {
    width: 100px;
    height: 300px;
    border: 1px solid green;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-right: 0.3rem;
    margin-left: 0.3rem;
}

.vbc-bar {
    width: 100%;
    background-color: green;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    height: 0;
    transition: height 2s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1; /* 确保条形在标题上方 */
}

.vbc-title {
    position: absolute;
    bottom: 10px; /* 可调整与底部的间距 */
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center bottom; /* 旋转原点设为底部中心，保证对齐 */
    white-space: nowrap;
    font-size: 14px;
    color: #000;
    z-index: 0; /* 标题置于条形下方，避免遮挡 */
}

.vbc-percentage {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    margin-top: 10px;
}

说明

• 标题移到容器后，定位不受条形高度变化影响，始终固定在容器底部
• 移除重复的transform设置，统一用rotate(-90deg)实现垂直文本
• transform-origin: center bottom确保旋转后文本的底部对齐容器底部
• 调整z-index层级，避免条形遮挡标题

内容的提问来源于stack exchange，提问作者Simon Vetterli