Autor Zpráva
Icka
Profil *
Zdravím, je nějak možné zadat, aby se mi centroval objekt, který má
display: block; float: left;
- to mám v podstatě políčka v řádku, ale chci, aby mi šly od prostřed... Vždy mi vycházejí pouze zleva :-(
tiso
Profil
Icka - nerozumiem, skús sem hodiť obrázok čo vlastne chceš...
Icka
Profil *
no prostě jak na centrování blokových elementů... ??? Zda to vůbec jde..?
Str4wberry
Profil
Icka
Pokud jsem pochopil dobře, tak obalit do např. divu s margin: 0 auto a nastavenou šířkou.
Icka
Profil *
no ale tím se přeci zruší vlastnost toho "inline-bloku" nebo prostě to nechápu
Railbot
Profil
My nechápeme tebem co vlastně chceš. Blokov= elemnty se centrují margin: 0 auto.
Icka
Profil *
mám div 800px široký a v něm mám např. 20x blokový element s vlastností float (abych je měl vedle sebe).

No a chci, abych ten div (ve kterém mám ty bl. el.) měl text-align: center; a to mi právě nefunguje... Tak se ptám, zda jdou blokové elementy nějak centrovat. margin: 0 auto mi taky nepomohlo...
Railbot
Profil
Blokové elementy jdou, jak už tady bylo 100x napsáno. Plovoucí objekt nikoli.
Icka
Profil *
aha, takže co tu uvádím, tak to jde nebo nejde? A jestli jde, tak teda jak? Páč mě se to nedaří... :-(
Railbot
Profil
Railbot
Nejde.
Str4wberry
Profil
Icka
Jedině to obalit třeba dalším divem, který bude centrován. Je nutné ovšem znát a zadat šíři jednotlivých elementů. To je ale o něčem jiném.
Bubák
Profil
Tady asi zatím z tvého popisu nikdo nepochopil, co vlastně chceš centrovat.
Floatované elementy nevycentruješ. Takže buď "dispay: inline" a v nadřazeném elementu "text-align: center", nebo výše zmíněné " margin: 0 auto".

Jakou má ten div, který centruješ šířku? Pokud jsi nic nezadal, bude to 100% a nepoznáš jestli je vpravo, vlevo, nebo uprostřed.
habendorf
Profil
Já to naprosto chápu. Doufám :o)

Je to dokonce běžná úloha, typicky menu. Představte si třeba pět položek v horizontálním menu, ty položky jsou blokové, tudíž musí být floatované. Ty položky mají samozřejmě neznámou šířku. A teď jde o to, celé to menu vycentrovat.

Cílem je dostat

-----AAA*BBB*CCC----

Je to oříšek, nepatří to úplně mezi základní znalosti, ale ano, jde to.
Dero
Profil
Je to oříšek, nepatří to úplně mezi základní znalosti, ale ano, jde to.

Základní rozhodně ne, ani většina profíků to nedá z hlavy. A přitom to jde tak snadno.
habendorf
Profil
Dero

A přitom to jde tak snadno.

Tak je to vždycky. Elegantní řešení jsou vždycky jednoduchá.
tiso
Profil
Dero, habendorf - teraz ste ma fakt dostali... Keby nemusím ráno vstávať do práce tak zvedavosťou nezaspím a pátram po tom ako to spraviť... No nič, ráno múdrejšie večera...
habendorf
Profil
tiso

http://pokusy.1-webdesign.cz/centrovany-float.html

Tak nekoukej do kódu a zkus na to přijít. Pro nonIE je to trivialita. Pro IE je to těžší.
tiso
Profil
habendorf - sorry, podvádzal som... Nad display: inline som rozmýšľal, ale nevedel som si to dať celé dohromady... Ako vidím ešte som málo experimentoval s CSS, keď potrebujem niečo zvláštne tak nad tým sedím hodinu a výsledok dám dokopy, teraz som toľko času nemal, treba ísť spať, čaká ma dlhý deň...
habendorf
Profil
tiso

V tom IE stylu je zajímavá ta pasáž

ul {
display: inline-block;
}
ul {
display: inline;
}

Vypadá to naprosto nesmyslně. Jeden z těch dvou řádků vyhodíš a přestane to fungovat :o)
tiso
Profil
habendorf - respect... Moja prax je cca 20 layoutov za 3 roky, viac zabudnem ako viem :-)
habendorf
Profil
Jen pro úplnost dodám, že existuje ještě druhé řešení využívající tagu <del>, viz http://www.cssplay.co.uk/menus/centered.html
To ale považuju za sémantickou prasárnu.

Dero

Tys měl na mysli tohle, viď?
Bubák
Profil
habendorf
Teď si já popíchnu, než půjdu spát. V nonIE prohlížečích to je kousek (20px=40px/2) posunuté doprava, ale standardní deklarace na začátku CSS to srovná.
Chamurappi
Profil
Reaguji na habendorfa:
Vypadá to naprosto nesmyslně.
Tam jde o to, že inline-block zapne layout (tedy vlastnost hasLayout) a znovunastavení inline už ho zpátky nevypne, že ano? Zkoušel jsem místo „display: inline-block“ dát „zoom: 1“ a funguje to stejně. Zajímavá chyba. Žádá si hlubší průzkum.
habendorf
Profil
Chamurappi

S tím zoomem je to ještě lepší řešení, díky. Dá se sloučit do jedné deklarace

ul {
zoom:1;
display: inline;
}

zatímco

ul {
display: inline-block;
display: inline;
}

nefunguje, ačkoliv by mělo být stejné jako

ul {
display: inline-block;
}
ul {
display: inline;
}

což funguje.

Tam jde o to, že inline-block zapne layout (tedy vlastnost hasLayout) a znovunastavení inline už ho zpátky nevypne, že ano?
Domnívám se, že je to tak. Na druhou stranu jiné vlastnosti nahazující hasLayout nezafungují. Jedno je jisté, IE by se takhle chovat neměl, je to celé založeno na využití chyby.
Dero
Profil
Tys měl na mysli tohle, viď?

Kdepak, já centruju víceméně bez prasáren (ano, takém bych se tomu s dovolením zasmál), jen s vědomím slabých stránek IE.

Odkážu na dokument poměrně fousatý, takže kdyby to snad v některém ze současných prohlížečů nefungovalo, řekněte mi.

http://dero.name/stuff/centrovani_bloku.html
habendorf
Profil
Dero

Vida, vida, to je taky hezké. Neznal jsem.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: