центрирование повернутого текста

SnowCatcher · September 9, 2011

добрый день! делаю выплывающее боковое меню. поворот его заголовка с помощью css делается так

.boxRotateLeft{
  -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(270deg);  /* FF3.5+ */
      -ms-transform: rotate(270deg);  /* IE9 */
       -o-transform: rotate(270deg);  /* Opera 10.5 */
          transform: rotate(270deg);  
               zoom: 1;
    display:block;
}

вопрос: как отцентрировать этот текст по-вертикали? дело в том, что для разных языков высота будет разная. вариант с картинками мне не подходит

вот еще сама разметка


<div id="hide" style="float:left;">
  <img src="img/hide.png">
  <span class="boxRotateLeft">hide</span>
</div>

Edited September 9, 2011 by SnowCatcher

psywalker · September 9, 2011

Покажи скриншоты того, как должно быть, и как не должно.

bot87 · September 9, 2011

может inline-block или display:table-cell

Edited September 9, 2011 by bot87

SnowCatcher · September 9, 2011

вот как сейчас

хочется так

пока выкрутился, прописав в класс boxRotateLeft

line-height: 7;

но от него у меня едет верстка. да и не помогает он для центрирования(

Softlink · September 9, 2011

SnowCatcher, так а padding и margin чем не угодили?

SnowCatcher · September 9, 2011

для каждого языка - не вариант. другое дело, если бы можно было высчитать высоту этого спана - и рассчитывать скриптом маргин (внешняя дивка "hide" у меня связана высотой). но при повороте высота спана считается как ширина "hide"

Edited September 9, 2011 by SnowCatcher

Softlink · September 9, 2011

для каждого языка - не вариант. другое дело, если бы можно было высчитать высоту этого спана - и рассчитывать скриптом маргин (внешняя дивка "hide" у меня связана высотой). но при повороте высота спана считается как ширина "hide"

у #hide вообще какие-то размеры есть?

SnowCatcher · September 9, 2011

да, высота 110px; ширина 20px

высота картинка 16px

Edited September 9, 2011 by SnowCatcher

psywalker · September 9, 2011

да, высота 110px; ширина 20px
высота картинка 16px

Погоди, а text-align: center; не помогает что ли?

А дай тестовую страницу с примером посмотреть.

SnowCatcher · September 9, 2011

да, высота 110px; ширина 20px
высота картинка 16px
Погоди, а text-align: center; не помогает что ли?
А дай тестовую страницу с примером посмотреть.

неа, не помогает. первым делом попробовал. вот, можете поколдавать, картинку не прилагаю)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
	<style type="text/css">
		.boxRotateLeft{
		  -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
			 -moz-transform: rotate(270deg);  /* FF3.5+ */
			  -ms-transform: rotate(270deg);  /* IE9 */
			   -o-transform: rotate(270deg);  /* Opera 10.5 */
				  transform: rotate(270deg);  
					   zoom: 1;
			display:block;
		}
	</style>
</head>
<body>
	<div id="hide" style="float:left;height:110px;background-color:#999999;width:20px;">
	  <img src="img/hide.png">
	  <span class="boxRotateLeft">hide</span>
	</div>
</body>

вобщем, без display:block; я смог узнать ширину. буду ее запоминать, делать маргин-топ, а после этого выставлять атрибут.

пойду попробую

Edited September 9, 2011 by SnowCatcher

psywalker · September 9, 2011

Так а нафига ты ставишь выравнивание самому тексту? Ты ставь контейнеру!

SnowCatcher · September 9, 2011

не помогает. говорю же, пробовал с самого начала.

sigma77 · September 9, 2011

SnowCatcher,

.boxRotateLeft {
    line-height: 110px
}

?

psywalker · September 9, 2011

не помогает. говорю же, пробовал с самого начала.

Конеша не поможет. Ты display:block; то убери у спана)

SnowCatcher · September 9, 2011

не помогает. говорю же, пробовал с самого начала.
Конеша не поможет. Ты display:block; то убери у спана)

увеличте количество букв в слове hide

sigma77

простите сердешна. width:20px; у дивки не выставил. в 8 посте написал об этом, а в код не добавил.

sigma77 · September 9, 2011

SnowCatcher,

Так line-height не подошел?

SnowCatcher · September 9, 2011

SnowCatcher,
Так line-height не подошел?

если увеличить количество букв в слове "hide" текст уезжает за пределы дивки. если текст один и тот же - вариант на миллион)

psywalker · September 9, 2011

Так не пойдёт? В мозиле проверь.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
        <style type="text/css">

                .boxRotateLeft{

					text-align: center;
					line-height: 0;
					font-size: 0;
					letter-spacing: -.25em;					   

                }
				.one {
					display: inline-block;
					background: red;
					vertical-align: middle;
-moz-transform: rotate(90deg);
											line-height: normal;
					font-size: 14px;
					letter-spacing: normal;					  



				}
				.helper {					line-height: normal;
					font-size: 12px;
					letter-spacing: normal;	background: blue; width: 0px; display: inline-block; height: 100%; vertical-align: middle;}
        </style>
</head>
<body>
        <div class="boxRotateLeft"  style="float:left;background-color:#999999; width:25px; height: 120px;">

          <span class="one">hide</span>
          <span class="helper"></span>
        </div>

</body>
</html>

Softlink · September 9, 2011

вот на что хватило меня

SnowCatcher · September 9, 2011

psywalker здорово)))))

кароче дело к ночи. сделал такой вариант, всё работает независимо от количества букв.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
        <style type="text/css">
                .boxRotateLeft{
		    -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
                       -moz-transform: rotate(270deg);  /* FF3.5+ */
                        -ms-transform: rotate(270deg);  /* IE9 */
                         -o-transform: rotate(270deg);  /* Opera 10.5 */
                            transform: rotate(270deg);  
                                 zoom: 1;

                }
        </style>
		<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
		<script type="text/javascript">
		function load(){
			nWidth = $(".boxRotateLeft").width();
			nMarginHideSpan = ( $("#hide").height() - $("#hide img").height() - nWidth )/2;
			$(".boxRotateLeft").css({"margin-top": nMarginHideSpan, "display": "block", "height": nWidth, "width": nWidth});
		}
		</script>
</head>
<body onLoad="load()">
        <div id="hide" style="float:left;height:110px;background-color:#999999;width:20px;">
          <img src="img/hide.png">
          <span class="boxRotateLeft">hifgdhde</span>
        </div>
</body>

всем спасибо в этом форуме

вот на что хватило меня

спасибо! завтра обязательно разберу

Edited September 9, 2011 by SnowCatcher

Softlink · September 9, 2011

Макс, а куда картинку вставлять в твоем примере? Ты пробовал с картинкой проверять?

psywalker · September 9, 2011

Макс, а куда картинку вставлять в твоем примере? Ты пробовал с картинкой проверять?

Картинку можно вставить абсолютом и прижать к верху например. А вообще ты у нас тут главный по CSS3, поэтому сам и выкручивайся)

SnowCatcher · September 9, 2011

Макс, а куда картинку вставлять в твоем примере? Ты пробовал с картинкой проверять?
Картинку можно вставить абсолютом и прижать к верху например. А вообще ты у нас тут главный по CSS3, поэтому сам и выкручивайся)

абсолютом у меня вообще не получится, потому что панелька выезжающая

эх, ща проверил свой код - верстка уехала(

Edited September 9, 2011 by SnowCatcher

Softlink · September 9, 2011

Макс, а куда картинку вставлять в твоем примере? Ты пробовал с картинкой проверять?
Картинку можно вставить абсолютом и прижать к верху например. А вообще ты у нас тут главный по CSS3, поэтому сам и выкручивайся)

:blush: про Selenit'a забыл, да? Сейчас он придет и че-нибудь сделает

SnowCatcher · September 9, 2011

вот на что хватило меня

огромное спасибо. поправил только

.boxRotateLeft{
  -webkit-transform-origin:30px 30px;
  -moz-transform-origin: 30px 30px;
  -o-transform-origin:30px 30px;
  -ms-transform-origin:30px 30px;
  transform-origin:30px 30px;
  width:20px;
}

вёрстка не едет, всё идеально!

Edited September 9, 2011 by SnowCatcher

Softlink · September 9, 2011

даже в ряд получилось выстроить

Sign In

центрирование повернутого текста

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information