Axel Richter: Text vertikal zentrieren

Beitrag lesen

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