[CSS] vertikale Positionierung

Dieses Thema im Forum "Webentwicklung" wurde erstellt von powernator, 3. Dezember 2008 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 3. Dezember 2008
    //EDIT: sorry, falsches Forum - sollte nach "Webdesign" ...

    Hallo =)

    Ich arbeite gerade an der Umsetzung eines Designs mithilfe von div-Ebenen, scheitere aber leider am Footer.

    Es gibt 3 Ebenen, die sich innerhalb einer größeren Eben befinden (mit float horizontal nebeneinander positioniert). Diese große Ebene hat left- und right-margin = auto, also keine feste Angabe bzgl. des Abstands zum Rand.

    Alle anderen Werte, wie Breite und Höhe sind fest.
    Große Box: w: 500px h: 125px
    linke Box: w: 100px h: 125px
    mittlere Box: w: 300px h: 125px
    rechte Box: w: 100px, h: 125px

    Die HTML-Datei lautet wie folgt:
    Code:
    <html>
<head>
 <style type="text/css" media="screen">
 body, html
 {
 background: #fff;
 margin: 0;
 padding: 0;
 }
 
 #footer
 {
 height: 125px;
 background: red;
 }
 #footer #footerbox
 {
 width: 500px;
 height: 125px;
 margin: 0 auto;
 background: #000;
 color: #fff;
 vertical-align: middle;
 }
 #footer #footerbox #left
 {
 float: left;
 height: 125px;
 width: 100px;
 background: blue;
 }
 #footer #footerbox #mid
 {
 float: left;
 height: 125px;
 width: 300px;
 background: violet;
 }
 #footer #footerbox #right
 {
 float: left;
 height: 125px;
 width: 100px;
 background: purple;
 vertical-align: middle;
 }
 </style>
</head>
<body>
<div id="footer">
 <div id="footerbox">
 <div id="left">left</div>
 <div id="mid">mid</div>
 <div id="right">right</div>
 </div>
</div>
</body>
</html>
    Versuche wie "vertical-align:middle;" waren erfolgslos.

    Habe auch schon innerhalb des divs ein <span>-Element erstellt und dieses mit vertical-align:middle; versehen, auch ohne Erfolg.

    Wichtig ist, dass der Text vertikal und horizontal zentriert wird ...
     
  3. 3. Dezember 2008
    AW: [CSS] vertikale Positionierung

    vertical-align funktioniert nur bei Tabellenzellen. Du kannst den Text mit text-align: middle horizontal mittig ausrichten.
     
  4. 3. Dezember 2008
    AW: [CSS] vertikale Positionierung

    text-align regelt nur die horizontale Ausrichtung des Textes.

    Laut CSS4You sollte vertical-align auch in divs gehen, funktioniert bei meiner Anwendung allerdings nicht.
     
  5. 3. Dezember 2008
    AW: [CSS] vertikale Positionierung

    line-height: 125px;

    setzt den inhalt vertikal die mitte der angegeben höhe.

    ansonsten klappt vertical-align:middle ohne probleme.
     
  6. 3. Dezember 2008
    AW: [CSS] vertikale Positionierung

    Danke Murdoc, genau das habe ich gebraucht
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.