webForumDet fria alternativet
Logga in / Bli medlem

Centrera en DIV.

HTML & CSS

6 svar · 404 visningar · startad av Fredde Mannen

Medlem sedan nov. 20014 054 inlägg
Trådstart#1

jag vet att man använder sig av margin: auto; för att centrera en div, detta funkar fint på huvudsidan och undersidorna, men i en popup har jag byggt upp en main div så här

<div style="margin: auto;width: 80%;height: 100%;">
Lite innehåll..
</div>

Men här centrerars inte DIVn i Internet Explorer, men funkar bra i Mozilla och Opera, vad kan mitt problem vara?? :q

Eller är bara IE skummdumm?

Medlem sedan nov. 200013 890 inlägg
#2

Kan du inte göra så här:

<body style="text-align: center;">
 <div style="width: 80%; height: 100%;">Lite innehåll..</div>
</body>
Medlem sedan nov. 20014 054 inlägg
#3

Web-Tor skrev:

Kan du inte göra så här:

<body style="text-align: center;">
 <div style="width: 80%; height: 100%;">Lite innehåll..</div>
</body>

Här centrerars ju all text... vill bara att den aktuella diven skall centreras, här måste jag ju börja stoppa en massa extra span eller divs för få texten vänsterställd!

Medlem sedan nov. 20017 144 inlägg
#4
<div align="center" style="margin: auto;width: 80%;height: 100%;">
Lite innehåll..
</div>
Medlem sedan juli 20013 378 inlägg
#5

En annan variant är att köra med absolut positionering till left:50% och sedan fylla p å med en "negativ vänstermarginal" som visas på t.ex. http://bluerobot.com/web/css/center2.html

Medlem sedan juni 2003771 inlägg
#6

Alltså ett exempel på det Jarvklo var inne på.
Så gör jag alltid når jag positionerar.


<html> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
body {background-color:green; color:yellow;}
 
div {width:400px; height:250px; position:absolute; left:50%; top:50%; background-color:blue; 
border:3px solid black; margin-left:-200px; margin-top:-125px; } 

<!-- positionerar gör du genom att sätta negativa tal. 
För centrering tar man då hälften av objektets storlek. --> 
i detta fall är diven 400
--> 
</style> 

</head> 
<body > 
<div> 
</div>
</table> 
</body> 
</html>
Medlem sedan nov. 20014 054 inlägg
#7

Jesper T skrev:

<div align="center" style="margin: auto;width: 80%;height: 100%;">
Lite innehåll..
</div>

Denna variant är inte HTML 4.01 Strict!

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