Peter Thomassen: Vertikal zentrieren

Hi ihr,
ich habe einen div-Bereich mit der Höhe von 34 Pixeln. Darin steht
eine Zeile Text mit 8px Größe - wie kann ich den vertikal zentrie-
ren?

Danke,
Peter

  1. Hallo Peter,

    ich habe einen div-Bereich mit der Höhe von 34 Pixeln. Darin steht
    eine Zeile Text mit 8px Größe - wie kann ich den vertikal zentrie-
    ren?

    die einfachste Variante ist sicher, der Zeile Text eine Abstand von
    genau 13 Pixeln oben und unten zuzuordnen, also margin: 8px 0;

    Viele Grüße,
    Stefan

    1. Hi,

      die einfachste Variante ist sicher, der Zeile Text eine Abstand von
      genau 13 Pixeln oben und unten zuzuordnen, also margin: 8px 0;

      Dann ist aber die Hintergrundfarbe weg. padding funzt nur mit IE,
      nicht mit Mozilla - weiß auch nicht, warum. Demo:
      http://cw.dns2go.info/.

      BTW: Warum steht das rechts so über? Ohne padding tut's das auch
      nicht - habe den Eindruck, dass das verschoben wird - also wie
      margin.

      Danke,
      Peter

      1. hi

        Dann ist aber die Hintergrundfarbe weg. padding funzt nur mit IE,
        nicht mit Mozilla - weiß auch nicht, warum. Demo:
        http://cw.dns2go.info/.

        Mozilla kennt padding, also ist der Fehler woanders.

        Grüße aus Bleckede

        Kai

        1. Hi,

          Dann ist aber die Hintergrundfarbe weg. padding funzt nur mit IE,
          nicht mit Mozilla - weiß auch nicht, warum. Demo:
          http://cw.dns2go.info/.

          Mozilla kennt padding, also ist der Fehler woanders.

          Ich sagte nicht, dass Mozilla padding nicht kennt, sondern dass es
          in diesem Fall nur mit IE (richtig) funzt. Ich suche seit gestern
          nach dem Fehler und finde ihn nicht! Weiß jemand von euch, woran
          das liegt?

          Danke,
          Peter

          1. hi

            Ich sagte nicht, dass Mozilla padding nicht kennt, sondern dass es
            in diesem Fall nur mit IE (richtig) funzt. Ich suche seit gestern
            nach dem Fehler und finde ihn nicht! Weiß jemand von euch, woran
            das liegt?

            laß' mal den Code sehen. Warscheinlicher ist, dasses der MSIE eben gerade NICHT richtig macht, besonders der 5er kann nicht besonders gut rechnen.

            Grüße aus Bleckede

            Kai

            1. Hi,

              Ich sagte nicht, dass Mozilla padding nicht kennt, sondern dass es
              in diesem Fall nur mit IE (richtig) funzt. Ich suche seit gestern
              nach dem Fehler und finde ihn nicht! Weiß jemand von euch, woran
              das liegt?

              laß' mal den Code sehen. Warscheinlicher ist, dasses der MSIE eben gerade NICHT richtig macht, besonders der 5er kann nicht besonders gut rechnen.

              Guck doch einfach rein, steht alles in style-Attributen. Benutze
              übrigens IE6.

              Danke,
              Peter

              1. Hi,
                nochwas:

                Ich habe den Eindruck, dass er margin automatisch gleich padding
                setzt. Ich habe ja padding: 10.5px angegeben, die macht er auch
                schön. Unten macht er den padding noch mal als margin hin, und zwar
                doppelt, also 21px. Wenn ich padding auf 20px setze, habe ich unten
                einen Abstand von 40px.

                Bye,
                Peter

                1. Hi,
                  ich hab's jetzt mit line-height gelöst.

                  Aber noch eine Frage: Wenn ich den Platz in einem div mit Breite
                  200px mit padding: 20px auf beiden Seiten auf 160px verkleinere
                  und da ein div mit 100% Breite reinmache, bekommt das bei Mozilla
                  160px oder 200px Breite?

                  Danke,
                  Peter

                  1. hi

                    Aber noch eine Frage: Wenn ich den Platz in einem div mit Breite
                    200px mit padding: 20px auf beiden Seiten auf 160px verkleinere
                    und da ein div mit 100% Breite reinmache, bekommt das bei Mozilla
                    160px oder 200px Breite?

                    eeeh moment! padding verkleinert gar nichts! Wenn du width:200px;padding:20px; am äußeren und width:100%; am inneren angibst, ist das innere 200 Pixel breit.
                    Nur im MSIE5 ist es dann nur noch 1^60 Pixel. (Das meinte ich mit kann nicht rechnen). Wenn du das gleiche Problem im MSIE6 hast, stimmt an deinem DOCTYPE was nicht.

                    Grüße aus Bleckede

                    Kai

                    1. Hi,

                      eeeh moment! padding verkleinert gar nichts! Wenn du width:200px;padding:20px; am äußeren und width:100%; am inneren angibst, ist das innere 200 Pixel breit.

                      Gut, das wollte ich wissen.

                      Nur im MSIE5 ist es dann nur noch 1^60 Pixel. (Das meinte ich mit kann nicht rechnen). Wenn du das gleiche Problem im MSIE6 hast, stimmt an deinem DOCTYPE was nicht.

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> -
                      was ist daran falsch?

                      Bye,
                      Peter

                      1. hi

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> -
                        was ist daran falsch?

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "DTD/xhtml11.dtd">

                        so - der Pfad muss zusammen mit dem <html xmlns="http://www.w3.org/1999/xhtml/"> dann die komplette URL ergeben.

                        Grüße aus Bleckede

                        Kai

                        1. Hi,

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> -
                          was ist daran falsch?

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "DTD/xhtml11.dtd">

                          so - der Pfad muss zusammen mit dem <html xmlns="http://www.w3.org/1999/xhtml/"> dann die komplette URL ergeben.

                          Danke, aber such mal in
                          http://www.w3.org/TR/xhtml11/xhtml11_dtd.html#a_xhtml11_driver
                          nach "<!D". Was findest du?

                          Außerdem liefert http://www.w3.org/1999/xhtml/DTD/xhtml11.dtd ei-
                          nen Error 404.

                          Bye,
                          Peter

                          1. Hallo,

                            Außerdem liefert http://www.w3.org/1999/xhtml/DTD/xhtml11.dtd ei-
                            nen Error 404.

                            Beim den XHTML 1.1-Seiten verwendet das W3C selbst http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd als DTD-Referenz.

                            MfG, Thomas

                            1. Hi,

                              Außerdem liefert http://www.w3.org/1999/xhtml/DTD/xhtml11.dtd ei-
                              nen Error 404.

                              Beim den XHTML 1.1-Seiten verwendet das W3C selbst http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd als DTD-Referenz.

                              Ok, danke.

                              Bye,
                              Peter

                    2. Hi,

                      Nur im MSIE5 ist es dann nur noch 1^60 Pixel. (Das meinte ich mit kann nicht rechnen). Wenn du das gleiche Problem im MSIE6 hast, stimmt an deinem DOCTYPE was nicht.

                      Der ist jetzt richtig, und er verrechnet sich bei 100% Breite im-
                      mer noch. Naja, habe jetzt eine absolute Angabe drin.

                      Bye,
                      Peter

                      1. hi

                        Der ist jetzt richtig, und er verrechnet sich bei 100% Breite im-
                        mer noch. Naja, habe jetzt eine absolute Angabe drin.

                        MSIE6 braucht HTML4.0 Strict osder besser oder 'nen HTML4.0 Transitional mit URL.

                        Grüße aus Bleckede

                        Kai

  2. Auch Hi!

    ich habe einen div-Bereich mit der Höhe von 34 Pixeln. Darin steht
    eine Zeile Text mit 8px Größe - wie kann ich den vertikal zentrie-
    ren?

    Setz' die line-height ebenfalls auf 34px. Ob das auch im IE tut, ist natuerlich fraglich.

    So long

    --
    There are two major products that come out of Berkeley: LSD and UNIX. We don't believe this to be a coincidence.
    -- Jeremy S. Anderson

    1. Hi,

      ich habe einen div-Bereich mit der Höhe von 34 Pixeln. Darin steht
      eine Zeile Text mit 8px Größe - wie kann ich den vertikal zentrie-
      ren?

      Setz' die line-height ebenfalls auf 34px. Ob das auch im IE tut, ist natuerlich fraglich.

      Da bin ich gerade auch drauf gekommen, es funzt auch im IE. Trotz-
      dem danke!

      Bye,
      Peter