Kako da vertikalno centriram text u blocku; CSS

[ arecibo @ 10.01.2004. 02:43 ] @

Moj primjer;

Code:
#meniItem UL LI A {
    display: block;
    vertical-align: middle;
        height:24px;
    margin:0;
    background:#cccccc;
    color:#000000;
    border-top:1px #999999 solid;
    width:155;
    text-decoration:none;
    font-weight: 700;
    text-align: justify;

[ arecibo @ 11.01.2004. 01:10 ] @

Code:

Treba da bude ovako:
++++++++++++++++++
+                                +
+                                +
+            Text           +
+                                +
+                                +
++++++++++++++++++

a meni izgleda ovako:
++++++++++++++++++
+            Text           +
+                                +
+                                +
+                                +
+                                +
++++++++++++++++++

Evo i cijelog koda kojeg sam uradio za 'menu':

Code:

#veza {
        padding:0;
        margin:0;
    text-align: left;
    width:155px;
    align:left;
        }

#veza UL {
    padding:0;
        margin:0;
    border-style: solid;
        border-color: #ffffff;
        border-width: 1px 1px 1px 1px;
        font-size: 11px;
    font-style: normal;
    background:#cccccc;
        color:#000000;
}

#veza UL LI {
        padding:0;
        margin:0;
        border:1;
}

#veza UL LI A {
    display: block;
        height:24px;
    margin:0;
        background:#cccccc;
    color:#000000;
    border-top:1px #999999 solid;
    width:155;
    text-decoration:none;
    font-weight: 700;

}

#veza UL LI A:hover  {
                     background:#ffffff;
                 color:#0000cd;
                 border-top    :1px #999999 solid;
                 text-decoration:none;
}

Tu je problem sa wrappingom unutar diva, kako to rijesiti?

[ Goran Rakić @ 11.01.2004. 21:47 ] @

vertical-align: center

[ arecibo @ 12.01.2004. 00:44 ] @

Nece ici, naveo sam to vec u 1. postu, inace sve bi bilo ok da je rijec o tablicama :) , ali ne mogu da provalim u cemu je fora, trazio sam neke slicno uradjene 'menije' po netu, princip je ama bas isti a i dalje mi ne stima... i dalje mi ne ide u glavu?
Evo jedan primjer: http://www.meyerweb.com/eric/css/edge/popups/demo.html
Text (linkovi) lijepo stoje vertikalno poravnati po sredini.
Nije valjda da nitko nema pojma?

Cudno mi je da se -zombie- ne javlja ;)

[ -zombie- @ 12.01.2004. 01:04 ] @

ovo već nije u redu, da me prozivate za svaku temu u kojoj se pomene CSS :-P

nego, pošto nemam previše vremena, ajde samo postuj link, ili daj kompletan html koji koristiš sa ovim CSSom, da ne moram da ga ja smišljam.

da vidimo u kom zeki grmi čuč.. ;)

[ arecibo @ 12.01.2004. 01:22 ] @

Hehehee, evo saljem att. :)

[ noviKorisnik @ 12.01.2004. 08:03 ] @

Code:
div, li
{
    border: 1px solid #000000;
    width: 50%;
}

a
{
    line-height: 200px;
    vertical-align: middle;
}

Evo, izbaci onaj svoj CSS, pa ubaci ovaj. Nije baš tako lepo ali je makar vertikalno centrirano.

[ arecibo @ 12.01.2004. 19:46 ] @

Hahahaa ovo je dobro, mora da se salis :D , hehee stvarno prejakoo!

Inace, odustao sam od lista jer nisam mogao div uskladiti sa tablicama na stranici, tako da sam isti meni uradio sa tablicama, 2× je jednostavnije ali niti tu ne mogu poravnati po y osi, jedina fora je centrirati text prema dole sa PADDING-TOP...

Ovu verziju vidim isto renderuju i Mozilla i IE (za razliku od one sa divom)...
Ali svejedno ocu da znam kako to sa poravnanjem u div-u, ako netko provali tu sam :)

[ noviKorisnik @ 12.01.2004. 22:54 ] @

Sad mi nije jasno da li si odustao od vertikalnog centriranja ili samo od korištenja listi u htmlu.

Fora je u tome što css property vertical-align važi samo za inline elemente, a to poravnanje vrši se u odnosu na liniju elementa. Zato ovaj veseli primer ima redak sa definicijom za line-height, a sve to za a element, koji je linijski.

Ako koristiš tabele, to može da izgleda lakše jer td prepoznaje vertikalno poravnanje i kao html atribut (čak je middle po defaultu) - jedino je potrebno podesiti visinu elementa i sve funkcioniše.

Ili sam promašio temu?

[ -zombie- @ 13.01.2004. 00:13 ] @

ne, baš si dobro objasnio..

treba samo dodati ovo na kraj onog CSSa

Code:

#meniItem UL LI A {
padding-top: 10;
}
#meniItem UL LI.linkHeader {
padding-top: 10;
}

znači, poJenta je da se ne koristi height u kombinaciji sa vertical-align (jel to ne radi), nego da se sve završi prirodno, postavljanjem veličine fonta i paddinga/margina..

[ arecibo @ 13.01.2004. 01:35 ] @

@noviKorisnik: da, dobro si objasnio, cijela POJANTA ove price je da sam umjesto height:22px trebao definirati line-height:22px svojstvo i sve bi bilo ok i sa divom i tablama.
btw. krivo sam te shvatio jer si se previse opcenito upustio u diskusiju(nisi gledao moj kod), moja greska :)

Ovo sto je zombie predlozio je ok. Ali je besmisleno da se pod height nekog elementa ako je to naravno definirano ne podrazumijeva visina istog elementa, bezveze, ali dobro, kad height ne radi sa vert.-alignom nije niti bitno.
Bitno da je pronadjen uljez, in the end i bio je samo jedan; u singularu :]