Text in Layer vertikal zentrieren

[Maik]

Hallo,

ich verzweifle gerade an der Ausrichtung:
in der css-Datei steht:
#Footer {
 background-color:#666666;
 height:60px;
 width:100%;
 position:absolute;
 bottom:0px;
 text-align:center;
 vertical-align:middle;
 }

im body steht:

<div id="Footer">text</div>

Paßt alles bestens, der footer ist am unteren Rand, der Text mittig. Aber leider "klebt" er am oberen Rand des Layers und läßt sich da auch nicht wegbewegen. Getestet hab ich mit IE6 und Opera 7.11, aber daran wirds wohl nicht liegen. Sowas wie text-valign gibt es nicht oder?
Sehe ich den Wald vor Bäumen nicht???

Danke!
Maik

[Christoph Schnauß]

hallo Maik,

ich verzweifle gerade

Nana, wer wird denn, das Forum hat schon viele davor gerettet, im Sumpf der Verzweiflung zu versinken.

in der css-Datei steht

lauter vrnünftiges Zeugs, bloß vielleicht ein oder zwei Einträge zu wenig.

Paßt alles bestens, der footer ist am unteren Rand, der Text mittig. Aber leider "klebt" er am oberen Rand des Layers und läßt sich da auch nicht wegbewegen.

Doch, läßt er. Es gibt mehrere Möglichkeiten: entweder baust du vor deinem Text noch irgendein
  <p> </p>
ein, oder, etwas eleganter, du gibst deinem Layer (resp. DIV) vor, daß er einen Rand haben soll. Den kannst du beliebig breit wählen.

Sowas wie text-valign gibt es nicht oder?

Nein, jedenfalls nicht in CSS, und du solltest konsequent bleiben und die Formatierung über CSS vollenden.

Sehe ich den Wald vor Bäumen nicht?

öhm, darf ich höflich bleiben?
;-)

Grüße aus Berlin

Christoph S.

[Maik]

Grüße aus Berlin

Christoph S.

Habe ich ausprobiert. Wenn ich <p> </p> davor schreibe, wird der Text unten ausgerichtet (trotz middle). Mit Rahmen ändert sich gar nichts...

Ich werde mal weiter testen...

Maik

[Tim Tepaße]

Hallo Maik,

#Footer {
/* ... */
vertical-align:middle;
}

im body steht:
<div id="Footer">text</div>

Die Eigenschaft vertical-align wirkt sich laut Standard nur in Tabellenzellen
oder innerhalb der line box, die durch ein inline-level Element generiert
wurde aus.

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

Letzteres klingt kryptisch, heißt aber übersetzt, daß es sich nur auf
die Ausrichtung von Text relativ zur Grundlinie des Textes auswirkt.

Wenn ich Dein Problem richtig verstehe, dann willst Du ungefähr folgenden
Effekt erreichen, nämlich das der Text innerhalb einer größeren positionierten
Box horizontal und vertikal zentriert ist:

-----------------------------------------------
 |                                             |
 |                                             |
 |                    text                     |
 |                                             |
 |                                             |
 -----------------------------------------------

Mit vertical-align ist das nicht möglich, es sei denn, Du benutzt bislang
noch eher kritisch im praktischen Einsatz zu beurteilende Einstellungen
für die Box wie display:table-cell.

An Deiner Stelle würde ich den Text im Inneren der Box anders zentrieren,
entweder über die Eigenschaft padding des footes-divs oder durch Einsetzen
einer zweiten Box, die dann über die Eigenschaft margin zentriert wird.

<div id="footer">
    <div style="margin:auto">
      text
    </div>
  </div>

Natürlich ist das alles keine schöne Variante der Auszeichnung, aber ich
weiß nicht, inwiewiet Du die Möglichkeit hast, Dein aktuelles Konzept neu
zu überdenken.

• Tim

[Maik]

• Tim

Danke, genau das wollte ich erreichen. Bin noch ganz am Anfang, also ist noch alles möglich ;-)

[Alex]

Hallo,

versuch's mal mit line-height: 60px;

Grüße, Alex