Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Kako da vertikalno centriram text u blocku; CSS

[es] :: Web dizajn i CSS :: Kako da vertikalno centriram text u blocku; CSS

[ Pregleda: 2984 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

arecibo
Hrvatska

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

Sajt: localhost


Profil

icon Kako da vertikalno centriram text u blocku; CSS10.01.2004. u 02:43 - pre 217 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

icon Re: Kako da vertikalno centriram text u blocku; CSS11.01.2004. u 01:10 - pre 217 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

icon Re: Kako da vertikalno centriram text u blocku; CSS11.01.2004. u 21:47 - pre 217 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

icon Re: Kako da vertikalno centriram text u blocku; CSS12.01.2004. u 00:44 - pre 217 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


+4 Profil

icon Re: Kako da vertikalno centriram text u blocku; CSS12.01.2004. u 01:04 - pre 217 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č.. ;)

 
Odgovor na temu

arecibo
Hrvatska

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

Sajt: localhost


Profil

icon Re: Kako da vertikalno centriram text u blocku; CSS12.01.2004. u 01:22 - pre 217 meseci
Hehehee, evo saljem att. :)
Prikačeni fajlovi
 
Odgovor na temu

noviKorisnik
Dejan Katašić
Novi Sad

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

Sajt: www.novikorisnik.net


+5 Profil

icon Re: Kako da vertikalno centriram text u blocku; CSS12.01.2004. u 08:03 - pre 217 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.
 
Odgovor na temu

arecibo
Hrvatska

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

Sajt: localhost


Profil

icon Re: Kako da vertikalno centriram text u blocku; CSS12.01.2004. u 19:46 - pre 217 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
 
Odgovor na temu

noviKorisnik
Dejan Katašić
Novi Sad

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

Sajt: www.novikorisnik.net


+5 Profil

icon Re: Kako da vertikalno centriram text u blocku; CSS12.01.2004. u 22:54 - pre 217 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?
 
Odgovor na temu

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

Član broj: 4128
Poruke: 3448
195.252.85.*

Sajt: localhost


+4 Profil

icon Re: Kako da vertikalno centriram text u blocku; CSS13.01.2004. u 00:13 - pre 217 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..

 
Odgovor na temu

arecibo
Hrvatska

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

Sajt: localhost


Profil

icon Re: Kako da vertikalno centriram text u blocku; CSS13.01.2004. u 01:35 - pre 217 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

[es] :: Web dizajn i CSS :: Kako da vertikalno centriram text u blocku; CSS

[ Pregleda: 2984 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.