Tipps, Tricks & Tutorials
Zentrieren von DIVs

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&ouml;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>

Autor: Kai Ackermann

12.243 Views