webForumDet fria alternativet
Logga in / Bli medlem

Att centrera något med css

HTML & CSS

7 svar · 438 visningar · startad av pakmannen

Medlem sedan dec. 2002227 inlägg
Trådstart#1

Hej,

För att centrera något både på höjden och bredden med css så har jag tidigare använt mig av:

top:50%
left:50%
margin-top:-höjden på diven/2
margin-left:-bredden på diven/2

Men jag märkte nyligen ett problem med den metoden. Om man förminskar fönstret, eller tex använder en låg upplösning så kan man inte scrolla uppåt eller åt vänster pga att marginalerna är negativa. Finns det något sätt att göra det här på ett bättre sätt?

Medlem sedan jan. 200463 inlägg
#2

Finns många olika lösningar

- http://www.hicksdesign.co.uk/articles/css/vertical_centering_with_css/index.php

- http://www.ssson.se/ klicka paragrafer sen css där hittar du

- #container {
width:800px;
height:500px;
margin: -250px 0px 0px -400px;
position:absolute;
top:50%;
left:50%
}

- div {
margin: 0 auto;
position: absolute;
top: 50%;
margin-top: -x;
}

Medlem sedan okt. 20005 273 inlägg
#3

Det finns massor med varianter på att centrera divar på.

Sök i detta forum efter centrera css och du kommer att få massor med svar.

mv icaaq

Medlem sedan nov. 2001274 inlägg
#4

Enklaste metoden när man vill centrera horisontellt är väl ändå nedanstående?

#div {
margin: auto;
}
Medlem sedan maj 2004451 inlägg
#5

Ja om man inte bryr sig om att det inte funkar som det ska i IE ;)

Medlem sedan nov. 2001274 inlägg
#6

Det funkar för mig att skriva så med IE. Vet inte hur det är med de äldre IE-versionerna iofs... :)

Medlem sedan jan. 20016 874 inlägg
#7

Tinwëlint skrev:

Ja om man inte bryr sig om att det inte funkar som det ska i IE ;)

Fungerar utmärkt i IE6, om du sätter läsaren i rätt "mode" (korrekt docktype)

Medlem sedan dec. 2002227 inlägg
#8

https://www.ssson.se har ju samma problem (på höjden), men eftersom den inte är särskillt hög är det väl knappast ett problem.

Hicksdesign verkar ha några bra lösningar, tack så mycket!

265 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
132 ms — ändringar (db)