Diskuze: CSS centrování

HTML a CSS HTML a CSS CSS centrování American English version English version

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Drahomír Hanák:

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
Jiří Gracík
Redaktor
Avatar
Odpovídá na Jiří Gracík
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.