[es] - Kako da vertikalno centriram text u blocku; CSS

arecibo
Hrvatska

Član broj: 17048
Poruke: 148
*.cmu.carnet.hr

Sajt: localhost

Profil

Kako da vertikalno centriram text u blocku; CSS

^{10.01.2004. u 02:43 - pre 246 meseci}

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;

Odgovor na temu

arecibo
Hrvatska

Član broj: 17048
Poruke: 148
*.cmu.carnet.hr

Sajt: localhost

Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{11.01.2004. u 01:10 - pre 246 meseci}

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?

Odgovor na temu

Goran Rakić
Beograd

Član broj: 999
Poruke: 3766

Sajt: blog.goranrakic.com

+125 Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{11.01.2004. u 21:47 - pre 246 meseci}

vertical-align: center

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

Odgovor na temu

arecibo
Hrvatska

Član broj: 17048
Poruke: 148
*.cmu.carnet.hr

Sajt: localhost

Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{12.01.2004. u 00:44 - pre 246 meseci}

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

Odgovor na temu

-zombie-
Tomica Jovanovic
freelance programmer
ni.ac.yu

Član broj: 4128
Poruke: 3448
*.beotel.net

Sajt: localhost

+5 Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{12.01.2004. u 01:04 - pre 246 meseci}

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

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

Odgovor na temu

arecibo
Hrvatska

Član broj: 17048
Poruke: 148
*.cmu.carnet.hr

Sajt: localhost

Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{12.01.2004. u 01:22 - pre 246 meseci}

Hehehee, evo saljem att. :)

Prikačeni fajlovi

CSS.html - 2.19k

Odgovor na temu

noviKorisnik
Dejan Katašić
Novi Sad

Član broj: 13216
Poruke: 4533
*.bankmeridian.com

Sajt: www.novikorisnik.net

+5 Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{12.01.2004. u 08:03 - pre 246 meseci}

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.

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

Odgovor na temu

arecibo
Hrvatska

Član broj: 17048
Poruke: 148
*.cmu.carnet.hr

Sajt: localhost

Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{12.01.2004. u 19:46 - pre 246 meseci}

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

Prikačeni fajlovi

Copy of CSS.html - 2.11k

Odgovor na temu

noviKorisnik
Dejan Katašić
Novi Sad

Član broj: 13216
Poruke: 4533
*.041net.co.yu

Sajt: www.novikorisnik.net

+5 Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{12.01.2004. u 22:54 - pre 246 meseci}

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?

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

Odgovor na temu

-zombie-
Tomica Jovanovic
freelance programmer
ni.ac.yu

Član broj: 4128
Poruke: 3448
195.252.85.*

Sajt: localhost

+5 Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{13.01.2004. u 00:13 - pre 246 meseci}

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

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

Odgovor na temu

arecibo
Hrvatska

Član broj: 17048
Poruke: 148
*.cmu.carnet.hr

Sajt: localhost

Profil

Re: Kako da vertikalno centriram text u blocku; CSS

^{13.01.2004. u 01:35 - pre 246 meseci}

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

Odgovor na temu