Vertikalno centriranje

[akibono]

molim za pomoc, naime ne umem da centriram div u divu, vertikalno centriranje u samom divu, horizontalno centriranje radim preko <div align="center"> i odlicno radi, ali vertikalno mi ne radi, probao sam preko vise tagova i delova koda, ali ne radi, zapravo ocu da centriram fotku koja se nalazi u divu, i da je stavim u centar diva, da li moze direktno da se centrira <img> il treba <img> staviti u <div> pa onda centrirati sam div ?

 

vertical-align: middle; mi nije radio, ako sam ga dobro napisao...

[efabrik]

<style type="text/css">

#tvojDiv {

position:relative;

left:auto;

top:auto;

}

#tvojaSlika {

position:absolute;

left:50%;

top:50%;

width:300px; /* Sirina slike */

height:200px; /* Visina slike */

margin:-100px 0 0 -150px; /* Prva vrednost: -Visina slike/2; zadnja vrednost: -Sirina slike/2 */

border:0;

}

</style>

 

<div id="tvojDiv">

<img src="slika.png" id="tvojaSlika" alt="bla"/>

 

Dakle kod <img> obavezno #id...u koliko imas vise slika u DIV koristi tabelu

</div>

[pebas]

^ To nije dobra praksa, bez uvrede ali tako se jednostavno ne radi. Evo i zasto:

 

Ne mora ID jer pravis komplikaciju ako ces CMS posle neki, a i ako je recimo portfolio stranica sa malim slikama (thumbs) treba ti poseban ID za svaku sto i nije bas pozeljno. Sa klasama radi slobodno samo, i ne koristi tabele nikad ako nije tabelarni prikaz (npr. finansijski izvestaj itd.)

 

U svakom slucaju primer iznad je los osim pozicioniranja (relative absolute odnosa, to je dobro), ne kapiram negativne margine u slici, width i height su nepotrebno definisani za image i tako se ne radi danas.

 

Tvoj predlog <div> unutar <div> pa onda <img> je dobar pravac pa tako da dobijes:

 

<div class="main-box">

<div class="image-box">

<img src="" title="" alt="" />

</div>

</div>

 

Tako treba da stuktuiras HTML. Onda radis na primeru koji je @efabrik dao drzeci se ponajvise pozicioniranja, ne i ostalog. Svaki div koji je apsolutno pozicioniran mora biti u divu koji je relativno pozicioniran da bi se uopste CSS uspesno primenio. To je bitno da zapamtis. Kada definises div image-box u primeru to ce se primeniti na sliku (width, height itd) onda <img> height:auto i width:100%, tako se radi jer tako izbegavas probleme, da ih ne nabrajam.

 

Uzgred bez tvog koda je tesko pomoci. Pokazi nam tvoj kod.

[akibono]

jel to znaci da recimo u primeru:

 

<div class="main-box">

<div class="image-box">

<img src="" title="" alt="" />

</div>

</div>

 

 

<div class="main-box"> treba da bude relativno pozicioniran, a <div class="image-box"> absolutno pozocioniran u odnosu na

<div class="main-box"> ?

 

koji je prioritet kod pozicioniranja, posto sam imao prolema sa tim, relativno pozicioniranje mi pravi probleme, jer se ponistava

sa absolutnim, naime ne vidim vezu izmenju ova dva pozicioniranja, tako da ili radim ili u relative ili u aboslute poziciji...kada

pocnem sve sa relative onda se vezuju divovi jedan na drugi ali kada izmesam relative i abosolute, pa opet absolute pe relative, nailazim na probleme, zapravo ne znam sta je starije, absolute ili relative?

 

Ovo mi zapravo treba jer sta cemo ako imamo fotografije kojima se menjaju visina i sirina iz fotke u fotke, a treba da ih centriramo u sredinu diva, da za svaku sledecu fotku kojoj su promenljive vrednosti, moramo da odredimo tacnu poziciju na

strani kako ne bi doslo do pomeranja, najbolje bi bilo kada bi postojalo centriranje prema referentnoj tacki, ili prema sredini diva, al to ne postoji kolko znam, nisam cuo za takvo resavanje, margine su u igri, kao i ovo sto is rekao, div u divu, pa onda fotka tom child divu.

[vili]

jel to znaci da recimo u primeru:

 

 

 

treba da bude relativno pozicioniran, a

absolutno pozocioniran u odnosu na

?

Tako je.

 

Neki objekat se pozicionira (relativno ili apsolutno, svejedno) u odnosu na prvog parent-a kome je definisana pozicija.

 

U konkretnom primeru, ako "image-box" pozicioniras apsolutno, a div-u "main-box" ne definises pozicioniranje, "image-box" ce biti apsolutno pozicioniran u odnosu na stranu (body). A ako "main-box" pozicioniras (apsolutno ili relativno, zavisi od konkretne potrebe), "image-box" ce biti pozicioniran apsolutno u odnosu na njega.

[pebas]

Nema prioriteta, sve je podredjeno tebi, ti si 'mozak operacije', ti odredjujes sta i kako spram potreba.

 

 

<div class="main-box"> treba da bude relativno pozicioniran, a <div class="image-box"> absolutno pozocioniran u odnosu na

<div class="main-box"> ?

 

Upravo tako ali opet u zavisnosti sta ti treba. Svaki div koji je apsolutno pozicioniran mora biti u divu koji je relativno pozicioniran da bi se uopste CSS na isti uspesno primenio. To je dobra definicija, a opet zavisi od potreba.

 

Tesko je reci bez tvog primera. Ali align=center ne valja, valja margin:0px auto;.

 

Da bi definisao vertical height div iznad mora (ne bas ali ne vidim kod tvoj) da ima fixed height, recimo 200px, onda unutrasnji div da ima 160px height, onda sa ono margin iznad postaje margin:20px auto 0px auto i bice vertikalno centriran.

 

EDIT:

 

Pretece me @vili :)

[akibono]

Stavljam primer malo kasnije, na drugom racunaru mi je baza s tim sajtom, al imam neko resenje, a ovo sto je stavio efabrik je sasvim legitimno i ok, kada znamo dimenzije diva odnosno fotke sa kojom manipulisemo, al ovde se radi o promenljivim velicinama, dakle samo 1 velicina poznata (sirina ili visina) ili u drugom slucaju obe velicine nepoznate. Tu css sa 50% margina ne pomaze, zapravo nema za sta da se veze ako nemamo tacnu velicinu jedne strane...nadam se da shvatas na sta mislim?

[vili]

Ako nemas unapred poznate dimenzije objekta, neces moci vertikalno da ga centriras samo uz pomoc css-a. Morace tu da radi i js.

 

Vertikalno centriranje radi samo u celijama tabele.

[Trunks]

Uf, zakomplikovaste ga. Evo jedan kratak pregled vertikalnog centriranja, sa ova tri ti ništa više ne treba (osim ako nećeš da podržavaš stare browsere). Sve zavisi od konteksta, da li je sajt responsive, koje su veličine sadržaja za centriranje otprilike itd.

 

1. Kad znaš dimenzije onoga što treba da centriraš:

Ovo je u suštini efabrik napisao gore, i to je potpuno validan način. Ovo što je pebas napisao je "ručno" centriranje i nije baš praktično, odnosno nije ni centriranje. Svaki put kad promeniš ili visinu container-a ili sadžaja, moraš da menjaš ceo CSS (i margine itd.), da ne pričam o slučaju kad ti visina spoljnog div-a nije poznata.

 

.spolja {
    position: relative;
}
.unutra {
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}

 

<div class="spolja">
    <div class="unutra">centrirano</div>
</div>

 

2. Kad ne znaš dimenzije onoga što treba da centriraš ili npr. imaš više redova teksta:

Bitno: ovo ne radi samo u IE7 i ispod. Sem toga, takođe je potpuno validno.

 

.spolja {
    display: table;
}
.unutra {
    display: table-cell;
    vertical-align: middle;
}

 

<div class="spolja">
    <div class="unutra">centrirano gomila teksta ili bilo čega</div>
</div>

 

3. Kad imaš samo jedan red teksta :

 

.spolja {
    height: 50px;
    line-height: 50px;
}

 

<div class="spolja">
    teskst
</div>

 

Dakle uvek zavisi od konteksta. Ali ovo što si radio sa

nikako ne valja, tako se ne radi još od 2003. Pre svega ovoga bi trebalo da prođeš neki dobar CSS tutorial, npr. ovaj pa ovaj.

[vili]

... (osim ako nećeš da podržavaš stare browsere).

Na zalost, ja moram da razmisljam i o IE7, posto nam vecina klijenata koristi u dobroj meri taj browser :unsure:

[Trunks]

Ma nije problem:

<!--[if lt IE 8]>
<style>
.spolja { position: relative; }
.unutra { position: absolute; top:50%;}
.unutra img {position: relative; top: -50%}
</style>
<![endif]–>

:)

[pebas]

@Trunks

 

Sto smo zakomplikovali? :D

 

Sa tabelama jeste validno ali je losa praksa i taj primer bih izbegao maksimalno, da ne govorim o responsive dizajnu.

 

U kojem tvom primeru ne mora da menja "rucno", a da nisu tabele? :)

 

Gde god je visina poznata moras 'rucno' da menjas u slucaju promene sadrzaja, visine slike itd. (margin:-100px, height:200px, ne?). Ista stvar je kod mog primera i ne mora ceo css da se menja vec samo div css sto je bezbolno.

 

Cak je bolje ograniciti visinu spoljasnjeg diva u odnosu na tvoj primer gde se ogranicava visina unutrasnjeg diva.

 

Jako dobar primer, tacnije jedini koji ja poznajem i sa kojim se susrecem svakodnevno za vertikalno centriranje, je praksa postavljanja overlay diva za icons, content itd. na prelazak misa preko slike ili ti div-a, onda top i left 50% (ili drugacije u zavisnosti od sadrzaja, visine, sirine, padding itd).

 

Banalno je govoriti o resenjima bez problema ali to "rucno" je prakticno nemoguce izbeci modernim CSS resenjima i bez JS kako @vili rece sto je mozda i najbezbolnije racunanjem visine spoljasnjeg diva i centriranjem unutrasnjeg u odnosu na spoljasnji. (u slucaju da korisnici nisu iskljucili JS u browseru, ako jesu nek se sele iz Konga)

 

Ako iko ima model u CSS-u i pokaze nam ga, a koji iskljucuje "rucno" u nekom momentu, meni bi licno jako olaksao stvari, i skidam kapu ali...

[neobarocco]

A ovako: http://jsfiddle.net/6hCfg/ :D

[Trunks]

Sa tabelama jeste validno ali je losa praksa i taj primer bih izbegao maksimalno, da ne govorim o responsive dizajnu.

U kojem tvom primeru ne mora da menja "rucno", a da nisu tabele? :)

Nisu ovo tabele, div je sve, to što ga renderuje kao table layout je drugo. Ne kapiram zašto je loša praksa? Možda grešim ali moraš mi dati neki argument, "ovo ne valja" ne pije vodu. :) A idealno je za responsive dizajn, nisam siguran o čemu pričaš: http://codepen.io/bradfrost/full/evwgx

 

Gde god je visina poznata moras 'rucno' da menjas[/b] u slucaju promene sadrzaja, visine slike itd. (margin:-100px, height:200px, ne?). Ista stvar je kod mog primera i ne mora ceo css da se menja vec samo div css sto je bezbolno.

Pa kod tebe ako imam spoljni div 500 px, i unutrašnji 200 px, moram da računam (500-200)/2 i onda da mu stavim margin-top: 150px. Ako bilo šta od ovih stvari promenim, moram opet da računam i da pišem, a pogotovo ako je visina spoljneg nepoznata cela stvar pada u vodu. Plus ako je nekim ludim slučajem visina container-a manja od visine sadržaja, opet tvoje puca a ovo ne. :)

U svakom slučaju ne vidim ni jednu prednost u odnosu na onaj prvi način što sam napisao, vidim samo jednu više komplikaciju. I naravno ogromnu manu - što moraš da znaš dimenziju i container-a i onoga što centriraš, u mom slučaju samo ovo drugo.

 

Ako iko ima model u CSS-u i pokaze nam ga, a koji iskljucuje "rucno" u nekom momentu, meni bi licno jako olaksao stvari, i skidam kapu ali...

Radi se tako što koristiš onaj moj prvi način, a ako su nepoznate dimenzije elementa koji centriraš, onda koristiš drugi, nema tu puno nauke. Ovo je već uveliko praksa.

[pebas]

@Trunks

 

Da pojasnimo. Shvatam ja da nisu tabele u pitanju, ja o njima pricam toj. <table>. Tabele se koriste zbog semantike za tabelarni prikaz samo i to je to. Moderna resenja preporucuju, ako mora tabele tip:

 

<div class="table">
  <div class="table-row">
    <div class="table-cell">here's some content</div>
  </div>
  <div class="table-row">
    <div class="table-cell">here's some content</div>
  </div>
</div>

 

Onda dolazimo na CSS table render za prikaz necega, sto je ok, to jest prihvatljivo ali opet kazem u praksi ne valja. A isto, gledajuci kroz praksu to opet ispada iz tvog primera (vezano za table-cell) jer ti fali recimo jos jedan div iznad oba da bi uopste razmisljao o responsive dizajnu, a i to je lose. Jer ako uzmemo bilo koji responsive design zasniva se na kolumnama pa tako imamo (u 99% slucajeva) recimo:

 

<div class="three columns">
  <div class="outer">
    <div class="inner">
<img src="" alt="" title="" />
</div>
  </div>
</div>

 

A to je vecini slucajeva (Bootstrap, Foundation, SKeleton itd itd) i uopste govoreci po tome se vidi da se u praksi koriste takva responsive resenja. Pa ako tvoj tabelarni primer uzmemo u obzir onda moramo za three columns da odredimo CSS render na display:table;, tacnije i preciznije menjamo citav responsive CSS framework. Ako ne zelimo to da menjamo onda dodajemo cetvrti div koji ce da preuzme na sebe display:table da ne bismo remetili kolumne.

 

Znaci komplikacija opet, ili ne? :)

 

Ne postoji varijanta u kojoj mozes centirati element u odnosu na spoljni element po vertikali ako je spoljnjem elementu visina nepoznata u CSS-u, tako da i to iskljucimo ili ne? :)

 

U mom primeru height je proizvoljno za unutrasnji element ali moras da regulises top i left u odnosu na spoljne dimenzije (spoljnjeg div-a). Ali evo prosto ako mozes da pojasnis tvoj primer jer ja ne kapiram kako funkcionise:

 

http://jsfiddle.net/xLR59/

 

U svakom slucaju poucna rasprava, otvoren sam potpuno za nova resenja zaista samo hocu prednosti da vidim.

 

@neobarocco

 

Cool resenje zaista, ali opet poznat height i CSS3 malo tricky za cross browser compatibility ali elegantno nema sta. :)

[Trunks]

Slažem se da je poučna rasprava, to je lepota (a i kletva) CSS-a, nikad nema samo jednog pravog rešenja da se nešto uradi. U ovakvim raspravama se saznaju prednosti i mane svakog rešenja i odlučimo šta ćemo na kraju. :)

 

@Trunks

Da pojasnimo. Shvatam ja da nisu tabele u pitanju, ja o njima pricam toj.

. Tabele se koriste zbog semantike za tabelarni prikaz samo i to je to. Moderna resenja preporucuju, ako mora tabele tip:

 

<div class="table">
  <div class="table-row">
    <div class="table-cell">here's some content</div>
  </div>
  <div class="table-row">
    <div class="table-cell">here's some content</div>
  </div>
</div>

Ovo je off-topic, ali kad si već spomenuo - za tabelarni prikaz sve osim

taga je greh, šta god moderna rešenja preporučivala.

 

Onda dolazimo na CSS table render za prikaz necega, sto je ok, to jest prihvatljivo ali opet kazem u praksi ne valja. A isto, gledajuci kroz praksu to opet ispada iz tvog primera (vezano za table-cell) jer ti fali recimo jos jedan div iznad oba da bi uopste razmisljao o responsive dizajnu, a i to je lose. Jer ako uzmemo bilo koji responsive design zasniva se na kolumnama pa tako imamo (u 99% slucajeva) recimo:

 

<div class="three columns">
  <div class="outer">
    <div class="inner">
<img src="" alt="" title="" />
</div>
  </div>
</div>

 

A to je vecini slucajeva (Bootstrap, Foundation, SKeleton itd itd) i uopste govoreci po tome se vidi da se u praksi koriste takva responsive resenja. Pa ako tvoj tabelarni primer uzmemo u obzir onda moramo za three columns da odredimo CSS render na display:table;, tacnije i preciznije menjamo citav responsive CSS framework. Ako ne zelimo to da menjamo onda dodajemo cetvrti div koji ce da preuzme na sebe display:table da ne bismo remetili kolumne.

 

Znaci komplikacija opet, ili ne? :)

 

U ovom tvom HTML primeru je dovoljno da se za "outer" stavi display: table, a za "inner" display: table-cell i eto ti vertikalnog centriranja. :)

 

Uglavnom, konačno si mi rekao šta ti tačno smeta u ovom rešenju. :) Poenta je da za layout stranice (columns, grid, kako god) ti ne diraš ništa. Nikad ne stilizuješ columns već samo ono što je unutar njih. Tako da - jeste, treba ti novi

ili bilo koji tag koji će da ga okruži da bi rešenje funkcionisalo, ali to je stvarno mala cena da se plati (jedan element vše, koji često može da bude upotrebljiv na više načina) da bi dobio vertikalno centriranje sa nepoznatim visinama i container-a i sadržaja.

 

Znači i dalje nisam video ni jednu veliku manu ovoga, osim što treba da se doda jedan dodatni element. Taj dodatni element često može da se iskoristi i za druge stvari (clear floats mi prvo pada na pamet) pa zbog toga nije strašan. Plus što nećeš imati u svakom poslu svuda vertikalno centriranje nepoznatih elemenata, tako da ćeš ga svakako minimalno koristiti na sajtu, na par mesta i to je to.

 

Mislim da je daleko manja "komplikacija" staviti dodatni div nego da stalno menjaš CSS ako se neka visina promeni, ili ako su sve visine varijabilne i nepoznate da rešavaš preko JavaScript-a.

 

U mom primeru height je proizvoljno za unutrasnji element ali moras da regulises top i left u odnosu na spoljne dimenzije (spoljnjeg div-a). Ali evo prosto ako mozes da pojasnis tvoj primer jer ja ne kapiram kako funkcionise:

http://jsfiddle.net/xLR59/

Ovo nisam razumeo, šta tačno znači ovaj jsfiddle što si linkovao, nije ni centriran?

[Trunks]

Evo primera onoga o čemu sam ja pričao (nije istim redom kao u mojoj poruci):

http://jsfiddle.net/trunkadelic/Tfmfb/2/

[pebas]

^ Perfektno, hvala.

 

Slažem se da je poučna rasprava, to je lepota (a i kletva) CSS-a, nikad nema samo jednog pravog rešenja da se nešto uradi. U ovakvim raspravama se saznaju prednosti i mane svakog rešenja i odlučimo šta ćemo na kraju. :)

 

Pa i sva ova rasprava je zbog toga jer nemamo problem konkretni koji resavamo. :)

 

Mislim da je daleko manja "komplikacija" staviti dodatni div nego da stalno menjaš CSS ako se neka visina promeni, ili ako su sve visine varijabilne i nepoznate da rešavaš preko JavaScript-a.

 

Definitvno se slazem, iskreno nov za mene nacin kao i @neobarocco primjer takodje, nisam ni razmilsljao o tom pristupu ranije, a odradio sam makar 100 'price' tabela sa div display:table..table-cell..table-row, strasno. :) Naucih nesto opet. ;)

 

Ovo nisam razumeo, šta tačno znači ovaj jsfiddle što si linkovao, nije ni centriran?

 

C c c sta sam ja paste-ovao, nebitno potpuno na kraju nemam snage sad opet da kucam. :)

 

Uglavnom @akibono eto...biraj. :D

[efabrik]

Moze ovako

[Trunks]

^ Pokrili smo to. :)

[vili]

Ajde sad zalepite ovu temu ;)

[neobarocco]

FlexBox

 

http://jsfiddle.net/LdxhY/

 

[vili]

Super je to, ali samo IE 10+

Meni 99% klijenata i dalje trazi IE8, a ima ih cak i sa IE7.

[neobarocco]

http://flexiejs.com/

[vili]

Fino :)