NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: CSS centrování

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:26.3.2013 16:36

Ahoj, mohl bych se zeptat jak se dá vycentrovat prvek stánky ....

Potřebuji aby měl position: fixed; bottom: 0; a margin: 0px auto;

avšak když použiji position fixed tak mi skočí doleva.. když ho nepoužiju tak zase skočí nahoru na stránku ...

Děkuju za rady :)

Odpovědět
26.3.2013 16:36
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:26.3.2013 16:49

Já osobně bych to vyřešil nějak takto:

#prvek{
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0px 0px -50px;
}
Nahoru Odpovědět
26.3.2013 16:49
Neaktivní uživatelský účet
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na Honza Bittner
Drahomír Hanák:26.3.2013 16:50

pokud znáš jeho šířku tak asi takhle:

position: fixed;
bottom: 0;
left: 50%;
margin-left: šířka/2;
 
Nahoru Odpovědět
26.3.2013 16:50
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:26.3.2013 16:53

OPRAVA
místo:

position: absolute;
margin: -100px 0px 0px -50px;

takto:

position: fixed;
margin: -50px 0px 0px -100px;
Editováno 26.3.2013 16:56
Nahoru Odpovědět
26.3.2013 16:53
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:26.3.2013 18:12

super .. tak vyřešeno takto :

body > header
{
        width: 200px;
        position: fixed;
        z-index: 50;
        height: 100px;
        left: 50%;
        top: 100%;
        margin: -80px 0px 0px -100px;
}

díky moc :)

Nahoru Odpovědět
26.3.2013 18:12
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.