Houyhnhnm: div zentrieren

Wie kann man einen div horizontal *und* vertikal zentrieren.

Das ganze soll auch nach einem Window-Resize zentriert bleiben - etwa so, wie ein centered Hintergrundbild ohne Wiederholung - ohne daß man per JS irgendwas rumrechnen muß.

  1. Wie kann man einen div horizontal *und* vertikal zentrieren.

    Das ganze soll auch nach einem Window-Resize zentriert bleiben - etwa so, wie ein centered Hintergrundbild ohne Wiederholung - ohne daß man per JS irgendwas rumrechnen muß.

    :) tausend mal probiert, nie ist was passiert.

    Kurzum, das geht nicht. Bin dann bei dieser Sache wieder zu Tabellen übergegangen...

  2. Hallo Houyhnhnm

    Wie kann man einen div horizontal *und* vertikal zentrieren.

    Wenn dieses Div eine definierte Größe hat, dann schau dir mal
    Zentrieren mit nur einem Element _und_ die dort verlinkten Seiten an.
    (besonders natürlich das CSS in den Quelltexten)

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
  3. Hello out there!

    Wie kann man einen div horizontal *und* vertikal zentrieren.

    Alternativ zu [Detlef] in moderenen Browsern auch:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
     <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
      <title>Test</title>  
      <style type="text/css">  
       [code lang=css]html {  
        display: table;  
        width: 100%;  
        height: 100%;  
       }  
       body {  
        display: table-cell;  
        width: 100%;  
        height: 100%;  
        vertical-align: middle;  
       }  
       div {  
        width: 150px;  
        height: 100px;  
        margin: auto;  
        border: 2px solid #999;  
        padding: 1em;  
       }
    

    </style>
     </head>
     <body>
      <div>
       <p>Lorem ipsum dolor sit amet</p>
      </div>
     </body>
    </html>[/code]

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hallo Gunnar

      ... in moderenen Browsern auch:

      Ja leider, wenn es diese Einschränkung nicht gäbe, dann wäre dies auch meine
      empfohlene Lösung.
      So verweise ich weiter auf die grundsätzlichen Varianten mit absoluter
      Positionierung und auf CSS vertical centering using float and clear.

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. Danke! Ich werds ausprobieren.

        Um Tabellen habe ich mich bisher gedrückt, aber die scheinen ja für einiges mehr als Zahlenkolonnen nützlich zu sein...

        1. Hallo Houyhnhnm

          Danke! Ich werds ausprobieren.

          Um Tabellen habe ich mich bisher gedrückt, aber die scheinen ja für einiges mehr als Zahlenkolonnen nützlich zu sein...

          Wo habe ich Tabellen vorgeschlagen?

          Auf Wiederlesen
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
          1. Wo habe ich Tabellen vorgeschlagen?

            Das muß schon ein paar Tage her sein - prost.

    2. Hallo Gunnar.

      Alternativ zu [Detlef] in moderenen Browsern auch:

      Wobei diese Methode meinen alten Konqueror 3.4 zum Absturz gebracht hat.
      (Im Endeffekt lag es an der Veränderung der display-Eigenschaft für das body-Element.)

      Einen schönen Samstag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      mathbr:del.icio.us/ mathbr:w00t/
      1. Hello out there!

        in moderenen Browsern

        vs.

        meinen alten Konqueror 3.4

        ;-)

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        1. Hallo Gunnar.

          in moderenen Browsern

          vs.

          meinen alten Konqueror 3.4

          ;-)

          Naja, „alt“ war etwas übertrieben; aktuell ist Version 3.5.

          Einen schönen Samstag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          mathbr:del.icio.us/ mathbr:w00t/
          1. Hello out there!

            in moderenen Browsern

            Naja, „alt“ war etwas übertrieben; aktuell ist Version 3.5.

            Ich sprach auch von „moderenen Browsern“, nicht von „neuen“. ;-)

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          2. hi,

            meinen alten Konqueror 3.4

            Naja, „alt“ war etwas übertrieben; aktuell ist Version 3.5.

            Sind da bei den Fricklern™ nicht immer noch an dritter, vierter und fünfter Stelle ettliche Versionsunternummern dazwischen?

            scnr,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hallo wahsaga.

              meinen alten Konqueror 3.4

              Naja, „alt“ war etwas übertrieben; aktuell ist Version 3.5.

              Sind da bei den Fricklern™ nicht immer noch an dritter, vierter und fünfter Stelle ettliche Versionsunternummern dazwischen?

              Jaja, hast ja Recht; es ist die Version 3.5.1.

              Einen schönen Samstag noch.

              Gruß, Ashura

              --
              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
              mathbr:del.icio.us/ mathbr:w00t/