Kako da vertikalno centriram text u blocku; CSS

Kako da vertikalno centriram text u blocku; CSS 10.01.2004. u 03:43 · pre 277 meseci #1

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;

Re: Kako da vertikalno centriram text u blocku; CSS 11.01.2004. u 02:10 · pre 277 meseci #2

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?

Re: Kako da vertikalno centriram text u blocku; CSS 11.01.2004. u 22:47 · pre 277 meseci #3

vertical-align: center

Potpis

http://sr.libreoffice.org — slobodan kancelarijski paket, obrada teksta, tablice,
prezentacije, legalno bez troškova licenciranja

Re: Kako da vertikalno centriram text u blocku; CSS 12.01.2004. u 01:44 · pre 277 meseci #4

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 ;)

Re: Kako da vertikalno centriram text u blocku; CSS 12.01.2004. u 02:04 · pre 277 meseci #5

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č.. ;)

Potpis

blogče :: unescaped beta^{^» ^{go-paste extenzija} ^» ^{reč dana: backup} ^» ^{bočne koalicije}}

Re: Kako da vertikalno centriram text u blocku; CSS 12.01.2004. u 02:22 · pre 277 meseci #6

Hehehee, evo saljem att. :)

CSS.html2.19k

Re: Kako da vertikalno centriram text u blocku; CSS 12.01.2004. u 09:03 · pre 277 meseci #7

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.

Potpis

BoxUp
interesantna logička igra
Monty Hall paradoks - interaktivni demo

Re: Kako da vertikalno centriram text u blocku; CSS 12.01.2004. u 20:46 · pre 277 meseci #8

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 :)

Copy of CSS.html2.11k

Re: Kako da vertikalno centriram text u blocku; CSS 12.01.2004. u 23:54 · pre 277 meseci #9

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?

Potpis

BoxUp
interesantna logička igra
Monty Hall paradoks - interaktivni demo

Re: Kako da vertikalno centriram text u blocku; CSS 13.01.2004. u 01:13 · pre 277 meseci #10

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..

Potpis

blogče :: unescaped beta^{^» ^{go-paste extenzija} ^» ^{reč dana: backup} ^» ^{bočne koalicije}}

Re: Kako da vertikalno centriram text u blocku; CSS 13.01.2004. u 02:35 · pre 277 meseci #11

@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 :]

Forum kao aplikacija na telefonu

Srodne teme