2011-12-22 22 views
21

Così sto usando i CSS per ruotare un testo da orizzontale a verticale (90 gradi) in questo modo:verticalmente e orizzontalmente allineare il testo dopo la rotazione CSS

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
writing-mode: tb-rl; 
filter: flipv fliph; 

Il mio problema è che questo sposta il modo testo al di fuori di il contenitore div. C'è un trucco per tenerlo nel contenitore? C'è qualche punto di ancoraggio che potrei impostare? Che cosa è un modo cross browser per regolare post?

risposta

17

Si potrebbe tirare indietro con alcune proprietà CSS ...

#whatever { 
    position: relative; 
    top: -4px; 
    right: -10px; 
} 

In alternativa, si potrebbe giocare con la proprietà transform-origin:

transform: rotate(-90deg); 
transform-origin:20% 40%; 
-ms-transform: rotate(-90deg); /* IE 9 */ 
-ms-transform-origin:20% 40%; /* IE 9 */ 
-webkit-transform: rotate(-90deg); /* Safari and Chrome */ 
-webkit-transform-origin:20% 40%; /* Safari and Chrome */ 
-moz-transform: rotate(-90deg); /* Firefox */ 
-moz-transform-origin:20% 40%; /* Firefox */ 
-o-transform: rotate(-90deg); /* Opera */ 
-o-transform-origin:20% 40%; /* Opera */ 
+3

Cosa succede se ho un elemento padre resizeble? come potrò raggiungerlo ?? –

+0

Grazie, funziona bene in FF. Ma c'è un modo per farlo funzionare anche in IE8 con una soluzione alternativa? –

+0

FYI ... per rispondere al mio precedente commento sopra: l'allineamento funziona in IE8 con il seguente: non usare "filter: flipv fliph", usa "writing-mode: rl-bt;" ... con gli stili condizionali funziona attraverso IE e FF. –

2

metodo alternativo, che è compatibile con il browser più e non ha bisogno di informazioni sulla quantità di testo in anticipo:

.disclaimer { 
    position: absolute; 
    right: 10px; 
    bottom: 10px; 
    font-size: 12px; 
    transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    line-height: 15px; 
    height: 15px; 
    width: 15px; 
    overflow: visible; 
    white-space: nowrap; 
} 

http://jsfiddle.net/d29cmkej/

Problemi correlati