powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как можно отцентровать повернутый вертикальный текст?
6 сообщений из 6, страница 1 из 1
Как можно отцентровать повернутый вертикальный текст?
    #39602496
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Мне нужно по центру ячейки вывести вертикальный (повернутый) текст.
Делаю так:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
th.hdr-month {
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	transform: rotate(-90deg);
}


Все отлично, текст центруется. Но ширина ячейки получается слишком большой, т.к. ее ширина подбирается без учета поворота текста.
Делаю так:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
th.hdr-month {
	max-width: 4ex;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	transform: rotate(-90deg);
}


Теперь ширина правильная (колонка узкая), но по вертикали текст не отцентрован, а сдвинут вверх.

https://jsfiddle.net/z2v1uvLg/4/
...
Рейтинг: 0 / 0
Как можно отцентровать повернутый вертикальный текст?
    #39602507
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Как можно отцентровать повернутый вертикальный текст?
    #39602526
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Результат по ссылке весьма посредственный, не лучше, чем у меня.
Но я теперь понял причину проблемы: https://jsfiddle.net/z2v1uvLg/4/
Добавил рамку вокруг поворачиваемого объекта и теперь видно, что ширина объекта меньше текста.
...
Рейтинг: 0 / 0
Как можно отцентровать повернутый вертикальный текст?
    #39602527
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ссылка не обновилась.
https://jsfiddle.net/z2v1uvLg/6/
...
Рейтинг: 0 / 0
Как можно отцентровать повернутый вертикальный текст?
    #39602572
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Шёл 2018.

Люди изобретали календарь.
...
Рейтинг: 0 / 0
Как можно отцентровать повернутый вертикальный текст?
    #39603492
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Обернул текст в span и сделал так:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
th.hdr-month {
	width: 6ex;
	position: relative;
}
th.hdr-month .vt {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}


Теперь все отлично.
...
Рейтинг: 0 / 0
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как можно отцентровать повернутый вертикальный текст?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]