HTML/CSS Problem mit Zentrierung des DIV-Wrappers

[epic]

Ein Kollege hat mir ein Layout geschickt, welches links ausgerichtet ist und möchte das gesamte Layout zentriert haben.

Ich habe gehört, dass es so eine Art Wrapper div gibt, welches das gesamte Layout umhüllt und somit zentriert. Leider funktioniert das hier nicht. Ich habe bereits unzählige Sachen, die mir Google vorgeschlagen hat mit margin probiert, auch align="center" funktioniert nicht.

Hat da jemand eine Idee?

Hier das CSS:

#wrapper {

}


#Layer-1 {
  position: absolute;
  left: +0px;
  top: +0px;
  width: 1024px;
  height: 768px;
  z-index: 1;
}


#Layer-2 {
  position: absolute;
  left: 0px;
  top: 171px;
  width: 291px;
  height: 594px;
  z-index: 2;
}


#Layer-3 {
  position: absolute;
  left: 702px;
  top: 0px;
  width: 296px;
  height: 552px;
  z-index: 3;
}


#Layer-4 {
  position: absolute;
  left: 272px;
  top: 660px;
  width: 495px;
  height: 19px;
  z-index: 4;
}


#Layer-5 {
  position: absolute;
  left: 149px;
  top: 592px;
  width: 741px;
  height: 69px;
  z-index: 5;
}


#Layer-6 {
  position: absolute;
  left: 533px;
  top: 150px;
  width: 287px;
  height: 406px;
  z-index: 6;
}


#Layer-7 {
  position: absolute;
  left: 206px;
  top: 150px;
  width: 279px;
  height: 406px;
  z-index: 7;
}

Vielen Dank!

 

[theHacker]

margin: 0 auto;

 

[epic]

margin: 0 auto;

leider ist es das nicht das habe ich nämlich schon versucht!

 

[Cosmoflamme]

Hier ist bestimmt was dabei:
https://www.thestyleworks.de/tut-art/centerblock.shtml

 

[chrissel]

leider ist es das nicht das habe ich nämlich schon versucht!

Der Wrapper-Div muss eine feste Breite haben. Dann geht das

 

[epic]

#wrapper {
width: 1030px;
  margin: 0 auto;

}

auch so geht es leider nicht

 

[chrissel]

#wrapper {
width: 1030px;
  margin: 0 auto;

}

auch so geht es leider nicht

Wenn du eine Auflösung von 1024x768 Pixel (oder kleinere Breite) hast, wirst du dort auch nichts sehen.
Du musst als Breite auch genau die Breite nehmen, die die Webseite hat.
Man kann sich grob vorstellen, dass dieses 'auto' dafür sorgt, dass der linke Abstand wie folgt berechnet wird: (Bildschirmauflösung - Breite) / 2
Wenn also die Auflösung jetzt gleich der Breite ist, dann kommt da dementsprechend 0, also kein Abstand raus.

 

[epic]

also auf dem Bildschirm, wo ich gerade arbeite hab ich 21,5" mit 1920x1080 Auflösung :S

 

[Renegade]

Hi,

also auf dem Bildschirm, wo ich gerade arbeite hab ich 21,5" mit 1920x1080 Auflösung :S

Mach doch als Test den Wrapper mal auf "width:50%"

 

[epic]

Hi,



Mach doch als Test den Wrapper mal auf "width:50%"

tut sich immer noch nichts das layout hat sich keinen "inch" bewegt

Edit:
Habs gelöst dank dem Elementuntersucher in Google Chrome bin ich drauf gekommen dass #Layer-1 bereits ein Wrapper ist und hab das wie folgt geändert von:

#Layer-1 {
  position: absolute;
  left: +0px;
  top: +0px;
  width: 1024px;
  height: 768px;
  z-index: 1;
}

auf

#Layer-1 {
  position: absolute;
  margin: 0 auto;
  width: 1024px;
  height: 768px;
  z-index: 1;
}

Das
left: +0px;
top: +0px;
war das Problem. Danke für ALLE Hilfestellungen!!

 

[Snyke]

Naja, zu bemerken dass du alle elemente absolute positionierst, also die werden nicht an den zentrierten div halten.