8 svar · 494 visningar · startad av learn
Hej,
Jag har en div som jag vill centrera både horisontellt och vertikalt på den yta av sidan som visas. Dvs om jag scrollat ner en bit på sidan så skall diven centreras just på den del av sidan som syns och inte mitten av hela sidan.. om ni förstår :)
Hur gör jag?
Till att börja med så vill jag åstadkomma det som visas på den bifogade bilden. Alltså en div (2) skall placeras i mitten ovanpå en annan div (2).
Blir galen, får det inte att funka! Har sökt och sökt men inget tycks hjälpa... Kan tyckas vara simpelt men...neej.
Att sätta left på div 1 funkar ju inte, då div 2 också ligger i mitten (mha "margin:0 auto").
Snälla, hjälp mig! :)
Lyckades lösa den horisontella centreringen.
left:50%; margin-left:-50px;
Där 50px är hälften av DIVens width.
Men hur ska jag göra för att få DIVen att placeras i mitten vertikalt på den del av sidan som syns?
Något med scrollHeight kanske, jag vet inte..? På något sätt måste man ju ta reda på hur långt ner besökaren har scrollat och sedan använda dessa koordinater på ngt sätt... Hur ska jag göra??
<style type="text/css">
div#mitten {
position:fixed;
margin:auto;
left:50%;
margin-left: -150px;
top:50%;
margin-top: -200px;
width:300px;
height:400px;
}
</style>
Aha! "position:fixed" kände jag inte till, vad gör den?
Det funkar hur bra som helst i FF men inte alls i IE (såklart), där hamnar DIVen helt fel.
Den lägger en box fixerad i din viewport.
IE hanterar inte det.
http://www.divinentd.com/experiments/emulating-position-fixed.html
http://css-discuss.incutio.com/?page=GhostInTheBox
echoSwe skrev:
Den lägger en box fixerad i din viewport.
IE hanterar inte det.
http://www.divinentd.com/experiments/emulating-position-fixed.html
http://css-discuss.incutio.com/?page=GhostInTheBox
Så, ngt annat tips på hur jag kan lösa detta problem?
R: Ska kika på länkarna också, men kom gärna med fler förslag.
Ja, du kan använda javascript.