Najelegantnejsie riesenie centrovania divov

foxo79

(21 hodnocení)

28. 7. 2013 14:36:41

Existuje nejake elegantne riesenie na nasledujuci css+html problem?

http://jsfiddle.net/rQ4wA/

Potrebujem vycentrovat tieto 3 divy tak aby prvy bol uplne vlavo, posledny uplne vpravo a stredny v strede.

Vsetky child divy vsak musia mat rovnake stylovanie.

Skusal som to aj cez display: table-cell ale na nic som neprisiel.

Obavam sa ze sa to asi ani neda urobit cistym css. Alebo ano?

28. 7. 2013 14:36:41

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927473

FAKAM

(10 hodnocení)

28. 7. 2013 14:57:43

http://jsfiddle.net/CH9K8/

S rovnakým štýlom to zrejme nepôjde.

28. 7. 2013 14:57:43

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927472

foxo79

(21 hodnocení)

28. 7. 2013 15:05:24

Myslel som si. Tych child divov moze byt aj viac kusov, takze by som to potreboval mat nastylovane pre vsetky rovnako.

Tak nic, budem to musiet riesit inac.

28. 7. 2013 15:05:24

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927471

Martin

(62 hodnocení)

28. 7. 2013 16:01:13

Napsal foxo79;978585
Myslel som si. Tych child divov moze byt aj viac kusov, takze by som to potreboval mat nastylovane pre vsetky rovnako.
Tak nic, budem to musiet riesit inac.

Já bych prostě zjistil kolik jich je a podle toho je umístit na vypočítanou pozici.

28. 7. 2013 16:01:13

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927470

foxo79

(21 hodnocení)

28. 7. 2013 16:40:23

Napsal Martin Kejzlar;978606
Já bych prostě zjistil kolik jich je a podle toho je umístit na vypočítanou pozici.

Ale ved samozrejme ze cez PHP by to nebol problem urobit, ale proste toto nie je prvykrat co som sa stretol s takouto situaciou a nie vzdy mam pristup k samotnemu html, resp. k PHP.

Takze ma skutocne zaujimalo riesenie LEN pomocou cisteho CSS.

Len som sa chcel uistit, ze som neprehliadol nejaku moznost, css trick o ktorom som este nevedel.

Nevadi, proste to nejde :)

28. 7. 2013 16:40:23

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927469

Jan Stejskal

(7 hodnocení)

28. 7. 2013 17:21:17

Napsal FAKAM;978584
http://jsfiddle.net/CH9K8/
S rovnakým štýlom to zrejme nepôjde.

Ale půjde.

Styl si upravte jak potřebujete. http://jsfiddle.net/rQ4wA/2/

28. 7. 2013 17:21:17

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927468

foxo79

(21 hodnocení)

28. 7. 2013 17:48:39

Po skombinovani vasich rad som dospel k takemuto rieseniu: http://jsfiddle.net/rQ4wA/2/

Funguje mi to vsak len pre 3 child elementy co v podstate nie je riesenie, kedze ako som spominal to si viem potom osetrit aj cez PHP.

Mna zaujima riesenie cisto pre CSS a pre moznost ze sa pocet tych child divov bude dynamicky menit. Samozrejme s tym limitom, ze celkovy sucet sirok jednotlivych child divov nepresiahne sirku rodicovskeho divu. To je jasne ze to uz nebude fungovat.

28. 7. 2013 17:48:39

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927467

Jan Stejskal

(7 hodnocení)

28. 7. 2013 18:07:16

Pokud jich chcete mít více jak 3 na řádku o dynamické šířce, pak neexistuje žádné řešení, jak je zarovnat doprostřed, uprostřed může být jen jeden. Musel byste vytvořit tři sloupce a do nich vložit požadovaný počet elementů. Pak můžete použít zaslané řešení.

28. 7. 2013 18:07:16

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927466

foxo79

(21 hodnocení)

28. 7. 2013 18:48:30

No nejde ani tak o zarovnanie na stred ako skor o rovnomerne rozlozenie, teda dynamicky sa bude menit len sirka priestoru medzi elementami (napr. ich margin). Sirka elementov by ostavala fixna.

Ok, asi sa to naozaj neda.

28. 7. 2013 18:48:30

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927465

FAKAM

(10 hodnocení)

28. 7. 2013 19:10:09

ešte niečo pomocou tabuľky http://jsfiddle.net/r9yrM/1/

28. 7. 2013 19:10:09

https://webtrh.cz/diskuse/najelegantnejsie-riesenie-centrovania-divov/#reply927464

foxo79

(21 hodnocení)

28. 7. 2013 19:36:23