Centrera ett html-objekt med negativa marginaler
Hittade en bra guide på Alsacreations som visar hur man kan centrera ett html-objekt med css. Här tänkte jag återpublicera ett av kodexemplena som visar hur man centrerar både horizontalt och vertikalt genom att använda negativa marginaler. Har testat så att det fungerar med IE6 och 7 samt Firefox 2.
Html-koden är simpel med endast en div som har id "content".
<body>
<div id="content">
This text will be centered.
</div>
</body>
<div id="content">
This text will be centered.
</div>
</body>
Css-filen innehåller en del regler. Med denna teknik måste man ange fast bredd och höjd på elementet som ska centreras. Ta sedan dessa värden, halvera dem för att lägga in som negativa marginaler.
body {
margin: 0; /* to avoid margins */
text-align: center; /* to correct the centering IE bug*/
}
#content {
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 200px;
margin-top: -100px; /* half of the height */
margin-left: -250px; /* half of the width */
border: 1px solid #000; /* temporary border */
text-align:center;
}
margin: 0; /* to avoid margins */
text-align: center; /* to correct the centering IE bug*/
}
#content {
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 200px;
margin-top: -100px; /* half of the height */
margin-left: -250px; /* half of the width */
border: 1px solid #000; /* temporary border */
text-align:center;
}
Tags