Text vertikal zentrieren

[Christian]

Hi

Wie kann ich denn Text in einer Box vertikal zentrieren?
Über padding geht es nicht, da dann das komplette Layout in Opera und Firefox flöten geht.

Mit vertical-align: middle; funktioniert das leider nicht, da reagiert gar kein Browser drauf :-/

Hoffe ihr könnt mir da helfen.

Bye, Chris

[Axel Richter]

Hallo,

Wie kann ich denn Text in einer Box vertikal zentrieren?

Das hängt sehr von der Art der Box und von der Art des Textes ab.

Mit vertical-align: middle; funktioniert das leider nicht, da reagiert gar kein Browser drauf :-/

Das kann ich nicht bestätigen. Für die Elemente für die sie gilt, wird die Eigenschaft von den Browsern schon umgesetzt.

viele Grüße

Axel

[Christian]

Mit vertical-align: middle; funktioniert das leider nicht, da reagiert gar kein Browser drauf :-/
Das kann ich nicht bestätigen. Für die Elemente für die sie gilt, wird die Eigenschaft von den Browsern schon umgesetzt.

K.A. vertical-align passiert gar nichts, egal was ich einstelle:

  
#Navigation  
{  
 float:      left;  
 top:      22px;  
 width:      100%;  
 height:      26px;  
 background-repeat:   repeat-x;  
 background-image:   url(../img/layout/NaviBG.gif);  
    word-spacing:    10px;  
    vertical-align:    middle;  
}  

Habe ich da irgendwas falsch gemacht?

[wahsaga]

hi,

K.A. vertical-align passiert gar nichts, egal was ich einstelle: [...]
Habe ich da irgendwas falsch gemacht?

Hast du unter Axels Link nachgesehen, ob dein Element zu denen gehört, auf die vertical-align anwendbar ist?

gruß,
wahsaga

[Axel Richter]

Hallo,

K.A. vertical-align passiert gar nichts, egal was ich einstelle:

#Navigation
{
float:      left;
top:      22px;
width:      100%;
height:      26px;
background-repeat:   repeat-x;
background-image:   url(../img/layout/NaviBG.gif);
    word-spacing:    10px;
    vertical-align:    middle;
}

> Habe ich da irgendwas falsch gemacht?  
  
Wie sieht das HTML dazu aus? Welches Element bekommt die ID Navigation? In welchem Kontext steht dieses Element? Was steht in diesem Element? Wie soll das vertikale Zentrieren aussehen?  
  
viele Grüße  
  
Axel  

[Christian]

Wie sieht das HTML dazu aus? Welches Element bekommt die ID Navigation? In welchem Kontext steht dieses Element? Was steht in diesem Element? Wie soll das vertikale Zentrieren aussehen?

HTML sieht so aus:
<div id="Navigation">Startseite News Kontakt</div>

Naja .. ist ein div Element, eine Box, keine Tabelle.
Was allerdings "inline-level" ist habe ich nicht gefunden.

Wie kann ich denn alternativ dazu etwas in meiner Box zentrieren?
Ein Leerzeichen mit der Schriftgröße 5, dann <br /> und dann meine Textlinks?

Bye, Chris

[Axel Richter]

Hallo,

#Navigation
{
float:      left;
top:      22px;
width:      100%;
height:      26px;
background-repeat:   repeat-x;
background-image:   url(../img/layout/NaviBG.gif);
    word-spacing:    10px;
    vertical-align:    middle;
}

  

> HTML sieht so aus:  
> <div id="Navigation">Startseite News Kontakt</div>  
>   
> Naja .. ist ein div Element, eine Box, keine Tabelle.  

Ein DIV-Element ist kein Synonym für CSS-Box. Ein DIV-Element gruppiert im HTML Bereiche. Wenn es, wie bei Dir, nur Textinhalt enthält, dann will es gerne ein Hx- oder ein P- oder ein LI- oder ein A-Element sein, je nach dem Sinn des Textinhaltes. Wenn "Startseite News Kontakt" ein Link sein soll, dann gehört dieser in ein A-Element. Gibt es mehrere dieser Links, dann ist das eine Liste von Links. Diese wird mit UL-/LI- oder OL/LI-Elemente ausgezeichnet.  
  

> Was allerdings "inline-level" ist habe ich nicht gefunden.  

<http://www.w3.org/TR/CSS21/visuren.html#q7>  
  

> Wie kann ich denn alternativ dazu etwas in meiner Box zentrieren?  

Was ich bisher sehe, ist ein DIV-Element mit \_einer\_ Textzeile Inhalt, welches per CSS eine Box von 26px Höhe und 100% Breite bildet. Entweder, Du verschweigst immer noch die Zusammenhänge, oder diese Breite macht float:left völlig unsinnig, weil 100% Breite eben gar keinen Platz mehr für Floating lässt. Die Angabe von top:22px ist ohne Angabe von position: in jedem Fall unsinnig.  
  
Bitte beschreibe, was Du erreichen willst, sonst kann man Dir nicht helfen.  
  
Eine Box mit einer Textzeile Inhalt, welcher vertikal in der Mitte steht, sieht so aus:  
  
<p style="border:1px solid black; height:3em; line-height:3em;">Die eine Textzeile</p>  
  
Ein Einsatz von vertical-align außerhalb von TD-Elementen ist selten sinnvoll. Wenn, dann sähe er so aus:  
  
<p style="border:1px solid black;"><img src="Beispiel.jpg" alt="Bild" style="width:3em; height:3em; vertical-align:middle;"><strong style="font-size:2em; vertical-align:middle;">Die eine Textzeile </strong><em style="vertical-align:middle;">weiter im Text</em></p>  
  
viele Grüße  
  
Axel