Absolut positionierte DIVs zentrieren
Michael
- design/layout
Hallo!
Ich habe ein großes Problem das mich schon an den Rande der Verzweiflung getrieben hat.
Ich habe auf einer Seite einige DIVs absolut positioniert um sie um eine Grafik zu verteilen. So weit so gut. Jetzt will ich allerdings den ganzen Block auf der Seite zentrieren und hab das mittels einer Table und einer DIV probiert.
Bei der Table funktioniert die Zentrierung gar nicht und bei der DIV funktioniert sie nur soweit als dass ich den gesamten Block verschieben kann. Was aber auch bei der Verwendung von Prozentangaben bei unterschiedlichen Auflösungen keine Zentrierung bewirkt.
Wie kann ich den DIV-Block zentrieren.
Bitte helft mir bei meinem Problem.
Michael
Moin!
Grundsätzlich zentriert man Blocklevelelemnte per margin:auto.
Weil der IE das gerne mal nicht versteht, bekommt das umgebende Element ein
text-align:center verpasst.
Da ich mir vorstellen könnte, dass sich das nicht mit deinen absoluten Positionierungen
verträgt, kannst du dein Blocklevelelement auch zentrieren per
div {margin-left: 50%; position:absolute; left:-[Breite des DIV:2];}
Darin wiederum kannst du dann deine bereits vorhandenen Elemente wieder relativ positionieren. ;-)
Gruß
Der Hans
Danke für deine Antwort - Die Lösung funktioniert sehr gut.
Hi,
Wie kann ich den DIV-Block zentrieren.
hier eine Moeglichkeit, die auf neueren Browsern funktioniert. Wenn Du NC 4x beruecksichtigen willst, hilft nur Javascript.
Gruesse Joachim
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Div Layer zentriert</title>
<style type="text/css">
html, body {
margin:0;
width:100%;
height:100%
}
#zentri {
position:absolute;
top:50%;
left:50%;
width:200px;
height:300px;
border:1px solid red;
margin-top:-150px;
margin-left:-100px
}
</style>
</head>
<body>
<div id="zentri"></div>
</body>
</html>