Zentrieren von DIVs
Die folgenden Codezeilen zeigen eine Lösung zum Zentrieren eines DIVs mit fester Breite auf einer Seite:
<html>
<head>
<title>Objekte zentrieren</title>
<style type="text/css">
<!--
#container
{
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px; /*das ist die hälfte der breite... nur im minusbereich*/
margin-top: -50px; /*das ist die hälfte der höhe... nur im minusbereich*/
border: 1px solid black;
}
-->
</style>
</head>
<body>
<div id="container">div mit fester breite(200px)<br />und höhe(100px)</div>
</body>
</html>
Eine weitere Möglichkeit besteht darin, prozentuelle Angaben zu verwenden:
<style type="text/css">
<!--
body
{
margin: 20px;
}
#container
{
width: 100%;
height: 100%;
border: 1px solid black;
}
-->
</style>
12.12.2003
Ein Tipp von: Kai Ackermann, bearbeitet und aktualisiert von: Designer in Action
