Wie zentriere ich horizontal ein absolutes DIV mit width:100%?

[HP-Bauer]

Hallo,

wie zentriere ich ein horizontales DIV, das absolut positioniert ist und eine Mindest- und Maximalbreite hat? Innerhalb der Maximalbreite hat das DIV immer eine Breite von 100%.

Ich habe es wie folgt versucht zu zentrieren:

  
#container-start {  
position:absolute;  
top:5%;  
left: 50%;  
width: 100%;  
min-width: 1048px;  
max-width:1400px;  
height:748px;  
margin-left: -50%;  
padding:0px;  
text-align:center;  
}  

Leider ist damit das DIV immer linksbündig und wenn ich margin-left: -25% setze, steht es viel zu weit rechts.

MFG
HP-Bauer

[Gunnar Bittersmann]

@@HP-Bauer:

nuqneH

wie zentriere ich ein horizontales DIV, das absolut positioniert ist

Warum  ist es das?

Qapla'

[HP-Bauer]

@@HP-Bauer:

nuqneH

wie zentriere ich ein horizontales DIV, das absolut positioniert ist

Warum  ist es das?

Qapla'

Ich habe es auch schon mit relative versucht, aber leider auch ohne Erfolg und innerhalb dieses DIVs muss ich verschiedene Objekte absolut positionieren.

MFG
HP-Bauer

[Gunnar Bittersmann]

@@HP-Bauer:

nuqneH

Ich habe es auch schon mit relative versucht, aber leider auch ohne Erfolg

Und wie sah dein Misserfolg aus? Vermutlich besser als das, was du jetzt hast.

Qapla'

[HP-Bauer]

@@HP-Bauer:

nuqneH

Ich habe es auch schon mit relative versucht, aber leider auch ohne Erfolg

Und wie sah dein Misserfolg aus? Vermutlich besser als das, was du jetzt hast.

Qapla'

Es war viel zu tief und horizontal war es zwar irgendwie in der Mitte aber exakt ausgerichtet auch nicht. Und innerhalb des DIV waren alle Objekte, die mit margin ausgerichtet und nicht absolut positioniert sind, falsch platziert.

MFG
HP-Bauer

[Gunnar Bittersmann]

@@HP-Bauer:

nuqneH

„Anhand deiner detaillierten Problembeschreibung und den Massen an Informationen, die du mir zur Verfügung stellst, kann ich durch meine langjährige Erfahrung mit Sicherheit sagen: Du machst etwas falsch.“ (Marc Reichelt)

Qapla'

[HP-Bauer]

Hallo,

ich habe letzte Woche schon mal hier angefragt, aber das Problem existiert immer noch. Ich bin am Überlegen, ob es überhaupt eine Lösung für zumindest die gängsten Browser gibt?

Problemstellung:
Ein Div-Container einer Website mit z.B. einer Breite von 100%; Mindestbreite von 800px und einer Maximalbreite von 1400px soll horizontal zentriert werden. Wie würdet ihr dies machen?

Mit z.B. 90% Breite würde es gehen, aber wie schaffe ich es mit 100%? Mit position:absolute oder relative in Verbindung mit left:50% und margin-left:-50% geht es nicht. Habe auch schon mit display:table, display:table-cell, text-align:center und margin:auto herumexperimentiert. Alles ohne Erfolg.

Bin für hilfreiche Tipps dankbar.

MfG
HP-Bauer

[Matthias Apsel]

Om nah hoo pez nyeetz, HP-Bauer!

Mit z.B. 90% Breite würde es gehen, aber wie schaffe ich es mit 100%? Mit position:absolute oder relative in Verbindung mit left:50% und margin-left:-50% geht es nicht. Habe auch schon mit display:table, display:table-cell, text-align:center und margin:auto herumexperimentiert. Alles ohne Erfolg.

Viewportbreite: < 1400: keine Zentrierung notwendig, denn das Div-Element ist so breit wie der Viewport:

Viewportbreite > 1400: margin-left: auto, margin right: auto.

Da letzteres auch nicht schadet, wenn der Viewport kleiner ist als 1400, sollten die Angaben

margin-left:  auto;
margin-right: auto;

deine Wünsche erfüllen.

Matthias

[Gunnar Bittersmann]

@@HP-Bauer:

nuqneH

Ein Div-Container einer Website mit z.B. einer Breite von 100%; Mindestbreite von 800px und einer Maximalbreite von 1400px soll horizontal zentriert werden. Wie würdet ihr dies machen?

Vermutlich gar nicht. Weil 800 Pixel Mindestbreite mehr sind als etliche Ausgabegeräte anzeigen können. Ich würde gar keine Mindestbreite voraussetzen, um dem Ping-Pong-Blick entgegenzuwirken für Textinhalte eine Maximalbreite angeben, zweckmäßigerweise in Abhängigkeit von der Schriftgröße (also in em).

Horizontales Zentrieren geht so wie in den FAQ beschrieben (auf der Startseite des Forums verlinkt). Dasl mag dieses Beispie herhalten (was übrigens ohne überflüssigen 'div'-Container auskommt).

Qapla'