Как выровнять вертикально повернутый текст по низу соответственно той же начальной точкеCSS

Разбираемся в CSS
Ответить
Anonymous
 Как выровнять вертикально повернутый текст по низу соответственно той же начальной точке

Сообщение Anonymous »

У меня есть панели с вертикально повернутым текстом, но я бы хотел, чтобы этот текст был выровнен в нижней части каждой панели.
Здесь вы можете найти пример: https:// newacf.samui-infotech.asia/sample-page/
Я пытался найти другие источники и решения, но не смог найти, что делаю неправильно.

Код: Выделить всё

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);
});
});

Код: Выделить всё

.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;
}

Код: Выделить всё


Sales Growth
75%



Я ценю любую помощь.

Подробнее здесь: https://stackoverflow.com/questions/786 ... he-same-st
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»