kostenloser Webspace werbefrei: lima-city

[CSS] Box zentrieren?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   demonic-legends

   

   demonic-legends hat kostenlosen Webspace.

   17:57, 20.11.2010

   Hallo,
   meine Box1 soll genau in der Mitte des Bildschirms stehen.
   Wie stelle ich das jetzt an?
   
   CSS-Code dieses Abschnittes:
   

   div {background-color:#efefef;border:1px solid #aaaaaa;}
   div#loginbereich
   {
       position:absolute;
       top:100px; left:20px;
       width:200px; height:300px;
   }

   
   
   
   Beitrag zuletzt geändert: 20.11.2010 17:58:49 von demonic-legends

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. seite5d-10

   seite5d-10 hat kostenlosen Webspace.

   18:00, 20.11.2010

   margin: auto;

   
   dürfte gehen, is aber nicht ausprobirt....
4. Autor dieses Themas

   demonic-legends

   

   demonic-legends hat kostenlosen Webspace.

   18:04, 20.11.2010

   seite5d-10 schrieb:
   

   margin: auto;

   
   dürfte gehen, is aber nicht ausprobirt....
   

   
   
   Funktioniert nicht^^
   
   Beitrag zuletzt geändert: 20.11.2010 18:06:39 von demonic-legends

5. s*************h

   18:16, 20.11.2010

   Hallo demonic-legends
   
   wenn sich die Box nicht in einer anderen befindet dann kannst du das so machen:
   
   

   body{
   text-align:center;
   }

   
   
   sollte sich die Box jedoch in einem anderen <div> befinden dann musst du das text-align:center; in den Style des <div> einfügen.
   
   Beispiel:
   

   .div{
   text-align:center;
   line-height: /* hier der Wert wie hoch das ganze div ist */
   }

   
   
   Gruß S.Brosch

6. ole-reglitzki

   

   ole-reglitzki hat kostenlosen Webspace.

   18:54, 20.11.2010

   x-zentrierung:
   wie software-brosch gesagt hat...
   
   y-zentrierung:
   das gleiche mit

   vertical-align: middle;

   
   
   ansonsten eine zweite Möglichkeit, wenn die breite und höhe absolut angegeben sind:
   

   .div{
     left: 50%;
     margin-left: -DIE_HÄLFTE_DER_BREITE;
     top: 50%;
     margin-top: -DIE_HÄLFTE_DER_HÖHE;
   }

   
   Wobei in diesem Fall die Box links nicht am Seitenrand klebt, wenn die Fensterbreite kleiner ist, als die Breite des DIV'S, gleiches gilt für den oberen Rand...

7. t***e

   18:58, 20.11.2010

   Hier gibt es sogar ein tutorial dazu: http://www.lima-city.de/tutorials/inhalte-zentrieren ;)
8. Autor dieses Themas

   demonic-legends

   

   demonic-legends hat kostenlosen Webspace.

   19:06, 20.11.2010

   tobbe schrieb:
   Hier gibt es sogar ein tutorial dazu: http://www.lima-city.de/tutorials/inhalte-zentrieren ;)
   

   
   
   Mit dem Tutorial funktionierts! =)
   
   Ich danke euch allen für eure Antworten!

9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?