Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как можно отцентровать повернутый вертикальный текст? / 6 сообщений из 6, страница 1 из 1
15.02.2018, 16:37
    #39602496
Alibek B
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
| Ответить | Цитировать | Написать  
15.02.2018, 16:47
    #39602507
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как можно отцентровать повернутый вертикальный текст?
Alibek B. , может это поможет...
https://sites.google.com/site/moispargalkicss/home/vertikalnyj-tekst-v-tablicah-html
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.02.2018, 17:14
    #39602526
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как можно отцентровать повернутый вертикальный текст?
Результат по ссылке весьма посредственный, не лучше, чем у меня.
Но я теперь понял причину проблемы: https://jsfiddle.net/z2v1uvLg/4/
Добавил рамку вокруг поворачиваемого объекта и теперь видно, что ширина объекта меньше текста.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.02.2018, 17:18
    #39602527
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как можно отцентровать повернутый вертикальный текст?
Ссылка не обновилась.
https://jsfiddle.net/z2v1uvLg/6/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.02.2018, 18:02
    #39602572
Агнец за бортом
Агнец за бортом
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как можно отцентровать повернутый вертикальный текст?
Шёл 2018.

Люди изобретали календарь.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.02.2018, 16:32
    #39603492
Alibek B
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как можно отцентровать повернутый вертикальный текст? / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 288ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444279]:
 0ms
get settings:
 9ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 174ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 13ms
total:  288ms
x
x
Закрыть


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