Ergebnis 1 bis 8 von 8
  1. #1
    mojo78 ist offline Mitglied
    registriert
    31-07-2006
    Ort
    Siegen
    Beiträge
    33

    Question Zum Xten: Div vertikal zentrieren

    Hi Leute,
    ich möchte Text in einem Div vertikal zentrieren. Ich weiß, dass die gleiche Frage schon x mal gepostet wurde, ich raffs nur anscheinend nicht, probiere schon den halben Tag rum :evil:

    Code:
    <div style="background-color:#FFFFFF; width:500px; height:100px; text-align:center; border:1pt solid #CCCCCC;" >
    Testtext
    </div>
    Also, wie schaffe ich es, dass der Text vertikal im div zentriert wird?
    Bin für jede Antwort dankbar.
    Ciao, Mojo

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

  3. #3
    mojo78 ist offline Mitglied
    registriert
    31-07-2006
    Ort
    Siegen
    Beiträge
    33

    Thumbs up AW: Zum Xten: Div vertikal zentrieren

    Danke für die Antwort.
    OK, es funktioniert, wenn ich einfach die line-height genau so hoch mache wie der Div ist. Aber nur für einzeilige Texte, für diesmal reicht mir das. Eine vertikale Zentrierung für einen beliebigen Text wie in einer normalen Tabelle scheint somit mit Divs nicht möglich zu sein.
    Bye Mojo

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Zum Xten: Div vertikal zentrieren

    Zitat Zitat von mojo78 Beitrag anzeigen
    Eine vertikale Zentrierung für einen beliebigen Text wie in einer normalen Tabelle scheint somit mit Divs nicht möglich zu sein.
    Doch, das geht:
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <
    head>
      <
    title>Text in der Mitte</title>
      <
    style type="text/css">
        .
    rahmen {border1px solid green;} /* just borders to see it */
      
    </style>
    </
    head>

    <
    body>
        <
    div class="rahmen" style="display: table; height: 400px; width: 300px; #position: relative; overflow: hidden;">
            <
    div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                <
    div class="rahmen" style=" #position: relative; #top: -50%">
                
    hier ein Text<br />
                
    noch ein Text<br />
                
    und noch ein Text<br />
                
    jetzt ist Schluss
                
    </div>
            </
    div>
        </
    div>
    </
    body>
    </
    html


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    mojo78 ist offline Mitglied
    registriert
    31-07-2006
    Ort
    Siegen
    Beiträge
    33

    Talking AW: Zum Xten: Div vertikal zentrieren


    Ja perfekt, das ist genau das was ich gesucht habe. Danke!

    Habs gerade mal durch die aktuellen Browser gejagt: Firefox, Opera, Konqueror, IE7 - sieht überall Spitze aus. Danke.

  6. #6
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Zum Xten: Div vertikal zentrieren

    Auch IE6 und Safari kommen damit klar, dürfte bedeuten, dass auch Chrome einverstanden ist.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  7. #7
    noidea ist offline Grünschnabel
    registriert
    17-02-2009
    Beiträge
    1

    AW: Zum Xten: Div vertikal zentrieren

    Kann mir jemand auf die Sprünge helfen?: Warum steht im von anna55 geposteten Code vor "position" und "top" jeweils ein "#"? Ist das valider Code?

  8. #8
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Zum Xten: Div vertikal zentrieren

    Zitat Zitat von noidea Beitrag anzeigen
    Kann mir jemand auf die Sprünge helfen?: Warum steht im von anna55 geposteten Code vor "position" und "top" jeweils ein "#"? Ist das valider Code?
    Nein, das ist kein valides CSS. Die Raute ist ein Selektor für die IEs. 6er und 7er IE berücksichtigen den Code. Richtige Browser wie FF, Opera und Safari übergehen diese nicht standardkonformen Angaben. Wenn Du valides CSS schreiben willst, was sicher richtig ist, kannst Du valide Hacks einsetzen:
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <
    head>
    <
    title>Text vertikal mittig</title>
    <
    style type="text/css">
    .
    rahmen {
    border1px solid green;
    /* just borders to see it */
    *+html #abstand {
        
    positionrelative;
    }
    html #abstand {
        
    positionrelative;
    }
    #abstand {
        
    displaytable;
        
    height400px;
        
    width300px;
        
    overflowhidden;
    }
    *+
    html #text {
    positionabsolute;
    top50%;
    }
    html #text {
    positionabsolute;
    top50%;
    }
    #text {
    displaytable-cell;
    vertical-alignmiddle;
    }
    *+
    html #kasten {
    positionrelative;
    top: -50%;
    }
    html #kasten {
    positionrelative;
    top: -50%;
    }
    </
    style>
    </
    head>
    <
    body>
        <
    div id="abstand" class="rahmen">
            <
    div id="text">
                <
    div id="kasten" class="rahmen">
                
    hier ein Text<br />
                
    noch ein Text<br />
                
    und noch ein Text<br />
                
    jetzt ist Schluss
                
    </div>
            </
    div>
        </
    div>
    </
    body>
    </
    html


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

Ähnliche Themen

  1. Vertikal zentrieren
    Von schrepfer im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 08-04-2008, 18:53
  2. bild vertikal zentrieren in einen div layer
    Von level3 im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 06-11-2007, 01:41
  3. [css] div mit fester größe in mitte zentrieren
    Von HsF_Hellsing im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 13-09-2006, 11:00
  4. script das div id ändert ?
    Von darkstar im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 22-08-2006, 12:02
  5. div tag über js zentrieren
    Von Kalicki2k im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 22-10-2005, 08:58

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •