Vertikalno centriranje teksta

[ kelja @ 14.01.2010. 10:34 ] @

Pozdrav, imam problem sa menijem i podmenijem, odnosno tekstom u meniju i podmeniju (crvene strelice) na ovoj strani:

http://byby.net16.net/easytrack/

Voleo bih da tekst bude vertikalno centriran, probao sam nekoliko nacina (line height -u ie7, brlja, divovi unutar a taga ne prolaze validaciju) ali nisu dali dobre rezultate.
Ima li neko fino resenje, a da fercera u svim browserima.

unapred zahvalan!

[ kazil @ 14.01.2010. 10:42 ] @

Vertical align? http://www.w3schools.com/Css/pr_pos_vertical-align.asp

[ kelja @ 14.01.2010. 10:46 ] @

Je l radi to s tekstom? mislim da sam probavao...

[ jahorina_at @ 14.01.2010. 16:08 ] @

Mislim da će ovo pomoći:

text-align: center;

[ kelja @ 14.01.2010. 16:29 ] @

Hm, hvala, ali ne pomaze u ovoj situaciji...
Sad cu jos jednom pazljivo da prodjem kroz taj css za meni...

[ valjan @ 14.01.2010. 21:19 ] @

vertical-align:middle radi samo sa tabelama (znaci td, tr i ostali tagovi vezani za tabele). Ako sam dobro shvatio iz tvog pitanja, probao si trik da postavis line-height vrednost na visinu diva, pa to bas nije funkcionisalo. Ono sto meni savrseno radi u svakom browseru je da ispred texta ubacim nesto poput ovog:

Code:
<span class="centrator"><br></span>

i zatim iz CSS-a podesim za klasu centrator da je font-size onoliko pixela koliko mi treba da centriram text iza njega (a moze se i dinamicki proracunati i dodeliti preko javascripta ako je potrebno).

edit: zaboravih da kazem da padding takodje ne radi posao pa da ne gubis vreme - IE pod height podrazumeva ukupnu visinu elementa sa borderima i paddingom, dok ostali browseri na height dodaju jos i border i padding, pa od DIVa visine 100px i padding-top od 20px, u IE dobijes DIV stvarne visine 100px sa gornjom unutrasnjom marginom od 20px, dok kod ostalih browsera dobijes DIV od 120px u kojem sadrzaj pocinje na 20px od vrha...

_{[Ovu poruku je menjao valjan dana 14.01.2010. u 23:09 GMT+1]}

[ kelja @ 14.01.2010. 22:45 ] @

E, hvala, probacu ovo resenje...

Inace uspeo sam da odradim ovo:

http://byby.99k.org/easytrack/

Mala razlika postoji u IE7, u odnosu na firefox (pixel-dva, otkud li, verovatno bas neki padding, ili margina), a u IE6 ne smem ni da pogledam.

[ w3bl0rd @ 15.01.2010. 06:15 ] @

ako ti je to smješteno u divu daj line-height isti koliko je i divu height to meni uvjek rješava problem...

[ kelja @ 16.01.2010. 01:05 ] @

Ma ok je line-heght, al kad imas jedan red teksta.
@valjan, odlicna fora, iskoristio sam je!
Jos jednom hvala svima!

[ valjan @ 16.01.2010. 11:25 ] @

Nekad, kad nije bilo CSS-a i slicnih fora, elementi na stranici su se pozicionirali tako sto ubacis transparentni gif 1x1 pa mu preko width i height parametara nastelujes koliko pixela da zauzme, i na taj nacin pomeris onaj element iza za toliki broj pixela. Ovo sto sam ti ja savetovao je samo moderna varijacija na temu. Ako nisi gadljiv na JavaScript, postoji jos elegantnije resenje, tako da text pozicioniras unutar manjeg DIV-a, pa taj DIV preko JavaScripta centriras po vertikali unutar onog veceg. Nesto poput:

Code:

function centriraj(){
    var spoljnaVisina=document.getElementById("spoljniDiv").style.height;
    var unutrasnjaVisina=document.getElementById("unutrasnjiDiv").style.height;
    var spoljniPolozaj=document.getElementById("spoljniDiv").style.top;
    var    unutrasnjiPolozaj=(Math.round((spoljnaVisina-unutrasnjaVisina)/2))+spoljniPolozaj;
    document.getElementById("unutrasnjiDiv").style.top=unutrasnjiPolozaj+"px";
}

I onda samo pozoves funkciju centriraj od nekud (recimo iz body taga preko onLoad eventa). Naravno, zamenis nazive DIV-ova u gornjema primeru sa onima koje si ti stavio kao id kod njih. Na ovaj nacin, ako se promeni velicina unutrasnjeg DIV-a, opet ce biti centriran po vertikali unutar onog spoljasnjeg.

_{edit: tek sam sad primetio da sam u poslednjem redu pogresno ispisao naziv promenljive kao "polozaj" umesto "unutrasnjiPolozaj", pa sam to ispravio.}

_{[Ovu poruku je menjao valjan dana 16.01.2010. u 14:34 GMT+1]}

[ kelja @ 16.01.2010. 12:43 ] @

Pa vec sam razmisljao i o slicicama... ali sam odustao, posto sam nekako sredio submeni, a u gornjem sam iskoristio pomenutu foru. :)
Hvala i na ovom javascript resenju, nisam alergican na jednostavan javascript, snalazim se, na amaterskom nivou s tim... :D